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 =真。

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

如何使用Ember.js checkBox检查

3 个答案: