嵌套在操作中的Ember.checkbox不会更改值 [英] Ember.checkbox nested in action doesn't change value

问题描述

模板：

{{#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 - 没有任何反应。可能是什么原因？

When I click on the div, the checkbox toggles 'checked' property. But when I click on the ckeckbox - nothing happens. What can be the reason?

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

推荐答案

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

The issue is that when you click on the checkbox 2 things happen.

1. 该复选框可以切换 isActive 属性，然后


2. selectRow 操作，再次切换 isActive 属性

1. the checkbox toggles the isActive property, then
2. the selectRow action is ran which again toggles the isActive property

所以 isActive 属性最终保持在与之相同的状态。

So the isActive property ends up staying in the same state that it was.

在你的情况下，我会摆脱这个动作，将复选框包裹在一个< label> 中，并将标签设置为显示：块。

In your case I would get rid of the action, wrap the checkbox in a <label> and set the label to 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将看起来像

and the css would look like

label {
 display: block; 
}

然后你可以摆脱 selectRow 操作完全是因为点击标签将触发复选框。

you would then be able to get rid of the selectRow action completely because clicking on the label will trigger the checkbox.

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

You can see a working bin here: http://emberjs.jsbin.com/nuvocumuteto/3/edit

这篇关于嵌套在操作中的Ember.checkbox不会更改值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！