ember.js - 如何使用 Ember.js 复选框检查所有内容

Question

有人可以给我一个样品吗？

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

{{view Ember.Checkbox }}

{{view Ember.Checkbox }}

Answer 1

像这样http://jsfiddle.net/marciojunior/G2Hrz/

App.IndexController = Ember.Controller.extend({
    isDog: false,
    isCat: false,
    isLion: false,
    isAll: function(_, value) {        
        if (arguments.length == 2) {
            this.set("isDog", value);
            this.set("isCat", value);
            this.set("isLion", value);
        } 
        return this.get("isDog") && this.get("isCat") && this.get("isLion");
    }.property("isDog", "isCat", "isLion")
});

Answer 2

我真的不知道这是否是你想要的，但这里是一个尝试：http: //jsbin.com/ekoyiw/8/edit

App.IndexController = Ember.ObjectController.extend({
  checkedOne: false,
  checkedTwo: false,
  checkedThree: false,
  isAllChecked: false,
  checkAll: function() {
    var isAll = this.get('isAllChecked');
    this.setProperties({checkedOne: isAll, checkedTwo: isAll, checkedThree: isAll});
  }.observes('isAllChecked')
});

希望能帮助到你。

Answer 3

您可以遍历子视图并检查每个项目。对于 Ember 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 .

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