Ember.js 클릭 한 뷰에 isSelected 클래스를 바인딩하는 방법은 무엇입니까?

Question

클릭하면 세부 정보가 표시되고 확대되는 일부보기가 있습니다.

지금은

는 모든 뷰를 클릭하고 확장하지만, 문제는

방법 최신 클릭보기를 확장하는 것입니다 할 수 있는가?

예를 들어보기 # 1을 클릭하면 확장됩니다. 따라서보기 # 2를 클릭하면보기 # 1이 축소되고보기 # 2가 펼쳐집니다.

클릭 한보기에 isSelected 클래스 이름을 바인딩 할 수 있다는 것을 알고 있지만 확인을 위해 화면에 을 지정하는 방법은 무엇입니까? If 다른보기가 선택되었습니다. "?

CollectionView을 사용합니까? 그러나 어떻게?

참고하시기 바랍니다.이 작업은 JSBin입니다.

Answer 1

우선 view을 component으로 변경합니다. 뷰에는 유효한 유스 케이스가 있지만 일반적으로 구성 요소를 사용하는 것이 좋습니다.

또한 생각해 보면 구성 요소 외부의 누군가가 마지막으로 클릭 한 구성 요소를 알아야한다는 것을 알 수 있습니다. 그 밖에 배우 (처음 null로 밖으로 시작) 속성이 lastComponentClicked을 불렀다 수있는 컨트롤러,

다음

App.IndexController = Ember.ArrayController.extend({ 
    lastClickedComponent: null 
}); 

, 당신은 각 구성 요소에 해당 속성을 전달할 수 있으며, 속성은 모든 컨트롤러 사이에 결합된다 할 수있다 다음과 같은 구성 요소 :

<script type="text/x-handlebars" data-template-name="index"> 
    {{#each content in model}} 
     {{ x-box content=content lastClickedComponent=lastClickedComponent}} 
    {{/each}} 
    </script> 

지금까지는 그렇게 좋았습니다. 이제, 구성 요소 자체에 대한 :

App.XBoxComponent = Em.Component.extend({ 
    classNames: ['box'], 
    isSelected: function(){ 
    return this.get('lastClickedComponent') === this._uuid; 
    }.property('lastClickedComponent'), 

    click: function(){ 
    this.set('lastClickedComponent', this._uuid); 
    } 
}); 

가 클릭 할 때마다, 당신은 얻을 때마다 재설정하여 모든 구성 요소와 컨트롤러 사이에 바인딩 된 lastClickedComponent 속성을 설정할 수 있습니다. 예를 들어 this._uuid과 같이 구성 요소에 고유 한 값으로 설정할 수 있습니다.

isSelected 계산 된 속성은 lastClickedComponent 속성이이 구성 요소의 속성인지 여부를 확인할 수 있습니다.이 경우 표시 할 내용이 확장됩니다. D 을하지만 내 _uuid는 정의 보여주는, 그래서 그것을 대신 elementId로부터있어지고있어 :

<script type="text/x-handlebars" id="components/x-box"> 
    {{content}} 

    {{# if isSelected }} 
     <div>LAST SELECTED</div> 
    {{/if}} 
    </script> 

전문 솔루션 here