如何使用Ember.js复选框选中所有复选框

有人能给我一个样品吗

{{view Ember.Checkbox checkedBinding="isAllChecked"}}

{{view Ember.Checkbox }}

{{view Ember.Checkbox }}

---

我真的不知道这是否是你想要的，但这里有一个尝试：

希望有帮助。

像这样

---

您可以迭代子视图并检查每个项。对于余烬1.11或更高

假设您有一个类似的设置：

{{ input type='checkbox' checked=isAllChecked }}
{{#each message in model}}
    {{#component 'message-row' tagName='div' as |component|}}
        {{ input type='checkbox' checked=component.isChecked }}
    {{/component}}
{{/each}}

#each块外的第一个复选框设置是否选中所有项目

checkAll: function() {
    var isAllChecked = this.get('controller.isAllChecked');
    this.get('childViews').filterBy('tagName', 'div').forEach(function(row) {
        row.set('isChecked', isAllChecked);
    });
}.observes('controller.isAllChecked')

我们根据任何更改来观察它，如果发生任何更改，则会触发checkAll，其中它会查找所有子视图，只过滤我们需要的标记（在本例中为div，因为每个复选框都包装在一个div中），对它们进行迭代，并将isChecked设置为true

由于只能从视图访问ChildView，所以上面的代码应该驻留在视图类中，而不是控制器中

{{ input type='checkbox' checked=isAllChecked }}
{{#each message in model}}
    {{#component 'message-row' tagName='div' as |component|}}
        {{ input type='checkbox' checked=component.isChecked }}
    {{/component}}
{{/each}}

checkAll: function() {
    var isAllChecked = this.get('controller.isAllChecked');
    this.get('childViews').filterBy('tagName', 'div').forEach(function(row) {
        row.set('isChecked', isAllChecked);
    });
}.observes('controller.isAllChecked')