CODEWITHSUNDEEP
ember.js
seagod
seagod

Reputation: 117

how to CheckALL with Ember.js checkBox

could someone give me a sample?

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

{{view Ember.Checkbox }}

{{view Ember.Checkbox }}

Upvotes: 2

Views: 471

Answers (3)

gokcen
gokcen

Reputation: 1

You can iterate thru child views and make each item checked. For Ember 1.11 or higher.

Imagine you have a similar setup:

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

First checkbox outside the #each block sets whether all items will be checked or not.

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

We observe it against any changes, if any occurs checkAll is triggered, where it finds all child views, filters only the tags we need (div's in this case, since each checkbox is wrapped in a div), iterates them and set isChecked=true.

Since childViews is only accessible from view, code above should reside in the view class, not controller.

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

I don't really know if this is what you want, but here is a try: 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')
});

Hope it helps.

Upvotes: 0

Marcio Junior
Marcio Junior

Reputation: 19128

Like this 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")
});

Upvotes: 1

Related Questions