Ember 및 SortMixin 내에서 CSS 클래스 변경

Question

정렬 작업을 완료했지만이 작업을 완료 한 테이블이 있습니다. 클래스가 정렬을 기준으로 위 또는 아래로 표시되도록 변경하고 싶습니다.

위에서 볼 수 있듯이 정렬 기능을 사용하려면 Ember에서 표준 SortableMixin을 사용했지만 클릭 한 개별 요소의 클래스를 변경하는 데 문제가 있습니다.

App.CampaignsController = Ember.ArrayController.extend({ 
    sortProperties: ["id"], 
    sortAscending: true, 

    actions: { 
     sortBy: function(property){ 
      if (this.get("sortProperties")[0] === property){ 
       this.toggleProperty("sortAscending"); 
      } else { 
       this.set("sortProperties", [property]); 
       this.set("sortAscending", true) 
      } 
     } 
    } 
}); 

난 표가 나는 행동을 적용한에 다음과 같습니다 : I 나타납니다 어떤 CSS 클래스 지시하는 sortAscending 부울을 사용하고

 <table class="table table-striped table-hover"> 
      <thead> 
      <tr> 
       <th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th> 
       <th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th> 
      </tr> 
     </thead> 
     <tbody> 
       <td>{{name}}</td> 
       <td>{{campaign_code}}</td> 
     </tbody> 
     </table> 

. 첫 번째 제목을 클릭하면 두 번째 제목의 클래스도 변경됩니다.

내가 클릭 한 제목에서만 CSS가 변경되게하려면 어떻게해야합니까?

Answer 1

<th>에는 상태 (오름차순인지 오름차순인지)가 있으므로 구성 요소에 포장해야합니다. 다만 대략적인 윤곽의이

<table> 
    <thead> 
    <tr> 
     {{#sortable-th property='name' action='sortBy'}} 
     Campaign Name 
     {{/#sortable-th}} 
    </tr> 
    </thead> 
</table> 

구성 요소의 템플릿

// templates/components/sortable-th.js 
<th> 
    <i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i> 
    {{yield}} 
</th> 

코드

// components/sortable-th.js 
export default Ember.Component.extend({ 
    sortAscending: true, 

    click: function() { 
    this.toggleProperty('sortAscending'); 
    this.sendAction('action', this.get('property'), this.get('sortAscending')); 
    } 
} 

같은 뭔가가, 구현 직접보십시오. 그러나 그것이 내가 그것에 대해 생각하기 시작하는 방법입니다.