이벤트에서 컬렉션의 바인딩 된 클래스를 업데이트하는 방법

Question

Ember.Router에서 만든 컨트롤러가있어서 테이블이 채워집니다.

템플릿 :

{{#each key in controller}} 

    {{#view App.TestView contentBinding="key"}} 

    <tr {{bindAttr class="view.isSelected"}} {{action selectKey this on="click" target="view" }}> 
    <td>{{key.id}}</td> 
    <td><button type="button" class="btn btn-danger" {{action removeKey on="click" target="view"}}>Remove</button></td> 
    </tr> 

    {{/view}} 

{{/each}} 

뒤에 코드 :

App.TestView = Em.View.extend({ 
    removeKey: function() { 
    var key = this.get('content'); 
    this.bindingContext.removeObject(key); 
    return false; 
    }, 
    selectKey: function (event) { 
    this.set('theClass', 'warning'); 
    }, 
    theClass: 'selectable', 
    isSelected: function() { 
    return this.get('theClass'); 
    }.property('theClass') 
}); 

내가 '경고'로 클래스를 변경하는 onclick 이벤트를 기대하고있어, 그리고 컬렉션의 행 수 (css 클래스에 따라) 노란색으로 강조 표시되어 있지만 이는 발생하지 않습니다. isSelected 속성이 DOM을 업데이트하지 않는 것 같습니다. 왜 그렇게하지 않는지 알 수 없습니다. 여기

Jsfiddle : http://jsfiddle.net/EsF4R/114/

Answer 1

나는 MetaMorph로부터 테이블 구조 사이에 충돌이 있다고 생각. 뷰에 태그 <tr>주기와 <td> 요소에 바인딩 클래스를 두는 것은 내가 (특히 <script x-start> 및 <script x-end>)

여기에 수정 된 바이올린을 볼 결과 HTML은 여전히 ​​이상한 생각하더라도, 그것이 작동되도록 할 것 같다 : http://jsfiddle.net/Sly7/EsF4R/126/

편집 여기

는 잘 생긴 일치하는 태그와 바이올린입니다. http://jsfiddle.net/Sly7/EsF4R/129/ 또한 당신이 원하는 동작에 더 많은 것을 고집합니다. 즉, 클래스 바인딩을 처리하고 td