3

我有一个由 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/

4

1 回答 1

2

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

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

编辑

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

于 2012-11-09T21:53:07.610 回答