嵌套在活动中的Ember.checkbox不会更改值

Question

模板：

{{#each document in documents}}
    <div class="col-md-6" {{action "selectDocument" document}}>{{view Ember.Checkbox checked=document.isSelected}} {{document.name}}</div>
{{/each}}

控制器：

App.IndexDocumentsController = Ember.ArrayController.extend({
      actions: {
        selectDocument: function(document){
          document.set('isSelected', !document.get('isSelected'));
        }
      }
});

当我单击div时，该复选框会切换“选中”属性。 但是，当我单击ckeckbox时，没有任何反应。 可能是什么原因？

更新到jsbin的链接： http ://emberjs.jsbin.com/nuvocumuteto/1/edit?html,css,js,output

Answer 1

我要说的是，您不是在这里以两种不同的方式关注“灰烬之路”。

首先， Ember.Checkbox是内部Ember类（ http://emberjs.com/api/classes/Ember.Checkbox.html ）。 推荐的呈现复选框的方法是使用Handlebars输入助手（ http://emberjs.com/guides/templates/input-helpers/#toc_checkboxes ）。 无论如何，这只是包装Ember.Checkbox 。

其次，如果要更新isSelected的值，则“ Ember Way”将使用双向数据绑定。 您的代码在读取document.isSelected时使用单向数据绑定，然后在用户单击时尝试通过手动编写selectDocument动作并从{{action}}调用{{action}} 。

相反，只需将Ember Handlebars Input Helper直接绑定到您的值即可，如下所示：

{{#each document in documents}}
    <div class="col-md-6">{{input type="checkbox" checked=document.isSelected}} {{document.name}}</div>
{{/each}}

Answer 2

问题是，当您单击复选框2时，会发生事情。

1. 该复选框切换isActive属性，然后
2. 运行selectRow操作，该操作再次切换isActive属性

因此， isActive属性最终保持与原来相同的状态。

在您的情况下，我将放弃该操作，将复选框包装在<label> ，并将标签设置为display: block 。

模板看起来像

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li {{bind-attr class="item.isActive:active"}}><label>{{input type="checkbox" checked=item.isActive}}{{item.name}}</label></li>
    {{/each}}
    </ul>
  </script>

和CSS看起来像

label {
 display: block; 
}

这样您就可以完全摆脱selectRow动作，因为单击标签将触发该复选框。

您可以在这里看到一个工作箱： http : //emberjs.jsbin.com/nuvocumuteto/3/edit