Ember.js checkbox for array controller computed property

Question

I have a checkbox that I would like to trigger a simple 'select all' functionality. The problem is that I can't figure out how to connect the checkbox's action to an action in my controller so that I can actually update the records.

App.LanguagesController = Ember.ArrayController.extend({
  actions: {
    toggleAllVisibility: function() {
      var newVisibility = !this.get('allAreVisible');

      var needingVisibilityChange = this.filterBy('visible', !newVisibility);
      needingVisibilityChange.setEach('visible', newVisibility);
    }
  },

  allAreVisible: function(param) {
    return this.filterBy('visible', false).get('length') === 0;
  }.property('@each.visible'),
});

In my template, I have the following input helper

{{input type='checkbox' checked=allAreVisible}}

This properly updates the checkbox when I change the elements manually (i.e. if all of them are selected, then checkbox updates), but no actions fire when I toggle the checkbox.

It looks like in older versions of Ember.js I could simply add an action parameter to the input helper but that doesn't work anymore. I'm assuming I need to setup something that observes when the computed property attempts to change, but I couldn't find anything in the docs or other help.

I also tried extending checkbox to send the click event:

App.AllLanguagesCheckbox = Ember.Checkbox.extend(Ember.ViewTargetActionSupport, {
  click: function() {
    this.triggerAction({
      action: 'toggleAllVisibility'
    });
  }
});

And then loaded that in my template with

{{view App.AllLanguagesCheckbox checkedBinding=allAreVisible}}

That allows the checkbox to trigger the action, but does not update based on the computed property in the controller.

I feel like I'm missing something obvious here.

EDIT

Based on kingpin2k's answer below, here's the working controller code:

App.LanguagesController = Ember.ArrayController.extend({
  toggleAllVisibility: function() {
    var newVisibility = !this.get('controller').get('allAreVisible');

    var needingVisibilityChange = this.get('controller').filterBy('visible', !newVisibility);
    needingVisibilityChange.setEach('visible', newVisibility);
  },

  allAreVisible: function(param) {
    return this.filterBy('visible', false).get('length') === 0;
  }.property('@each.visible'),
});

It's not called with the normal scope so you have to explicitly go through the controller to get the model array, but it works as expected now.

Here's the accompanying input helper:

{{input type='checkbox' checked=allAreVisible change=toggleAllVisibility}}

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-18T19:49:57

The problem is your checkbox is connected to a computed property, the computation should derive the value (aka you shouldn't be setting it), which is what would be happening when someone tries to check.

_allAreVisible:false,

allAreVisible: function(param) {
  if(this.filterBy('visible', false).get('length') === 0){
       // set to true;
       // else set to false
}.observes('@each.visible'),

http://emberjs.jsbin.com/abODIKoj/1/edit

Ember.js checkbox for array controller computed property

1 Answers