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时，复选框会切换并选中＆＃39;属性。但是，当我点击ckeckbox时 - 没有任何反应。可能是什么原因？

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

Answer 1

我认为你没有关注＆＃34; Ember Way＆＃34;在这里以两种不同的方式。

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

其次，如果你想更新isSelected的值，那么＆＃34; Ember Way＆＃34;是使用双向数据绑定。您的代码在读取document.isSelected时使用单向数据绑定，然后在用户通过手动编写selectDocument操作并调用时单击时，尝试在另一个方向上手动重新创建数据绑定来自{{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

问题在于，当您单击复选框时，会发生一些事情。

复选框切换isActive属性，然后
运行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

嵌套在操作中的Ember.checkbox不会更改值

2 个答案: