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イベントによってクラスが「warning」に変更され、コレクション内の行が黄色で強調表示されることを期待していますが(cssクラスのように)、これは発生しません。isSelectedプロパティはDOMを更新していないようで、なぜ更新されないのかわかりません。
ここのJsfiddle:http: //jsfiddle.net/EsF4R/114/