SelectAll feature with Ember ObjectController and ItemController

Question

I am trying to implement a multiselect row in a table. The parent controller is just an object controller. It has a model, and the view iterates over the recordset of the model as individual rows. I have implemented an itemController for all the rows in the model. That works. But for the 'selectAll' functionality, in the parent controller, I am not able to get hold of all the items (individually). Do you have any idea how to go abt it? Here's my work so far :

export
default Ember.ObjectController.extend({
 // parent Controller
itemController: 'checkbox',
selectAll: function(key, value) {
    var items = this.get('model.items');
    if (arguments.length == 2) {
        this.setEach('isSelected', value);  //setEach is throwing an error sine it comes from ArrayController where as I am using ObjectController as the parent controller type
        return value;
    } else {
        return this.isEvery('isSelected', true); //isEvery is also throwing error for the same reason

}.property('model.items.@each.isSelected')

And my Item Controller (checkboxcontroller) is as follows :

export default Ember.ObjectController.extend({
isSelected: false,
selectedListOfItems: [],
isSelectedChange: function() {
    var selectedListOfItems = this.get('selectedListOfItems');
    var itemId = this.get('id');  // comes from the model.items.id
    debugger;
    if (this.get('isSelected')) {
        // add itemId to the selected array
        var index = selectedListOfItems.indexOf(itemId);
        if (index > -1) {
            selectedListOfItems.splice(index, 1, itemId);
        } else {
            selectedListOfItems.push(itemId);
        }
    } else {
        // remove itemId from the selected array
        var index = selectedListOfItems.indexOf(itemId);
        if (index > -1) {
            selectedListOfItems.splice(index, 1);
        }
    }
    this.set('selectedListOfItems', selectedListOfItems);
    }.observes('isSelected')
});

My doubt is how do I do selectAll on the parent controller (that is of ObjectController type) that selects all the checkboxes of all the children. I am not sure if the info I've provided above is enough. Kindly let me know if you need more info. Thanks in advance

score 0 · Answer 1 · answered Oct 10 '14 at 00:41

I got it working by adding a listener to the child (ItemController) that listens for any change in the parent's variable.

Here's what I did :

parentControllerDidChange: function() {
    if (this.get('parentController.selectedAllItems')) {
        this.set('isSelected', true);
    } else {
        this.set('isSelected', false);
    }
}.observes('parentController.selectedAllItems')

That did the trick. Now If I toggle the boolean variable on the parent controller, all the children react. Ember the beauty !

SelectAll feature with Ember ObjectController and ItemController

1 Answers1