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事件将类更改为'warning'，并且集合中的行以黄色突出显示（根据css类），但是这不会发生。 isSelected 属性似乎没有更新DOM，我无法理解它为什么不这样做。

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

Answer 1

我认为Metamorph和表结构之间存在冲突。将标记<tr>提供给视图并将类绑定放在<td>元素上似乎使其工作，即使我认为生成的html仍然很奇怪（特别是<script x-start>和<script x-end>）

在此处查看您修改过的小提琴：http://jsfiddle.net/Sly7/EsF4R/126/

修改

这是一个有着漂亮的匹配标签的小提琴。 http://jsfiddle.net/Sly7/EsF4R/129/ 此外，它更符合您的行为，即处理类绑定并单击tr元素而不是td

如何在事件集合中更新绑定类

1 个答案: