Ember.js - multiple checkeboxes bound to a single array

Question

I have a list of checkboxes and I can only allow the user to pick two. I then need the value of those selected checkboxes added to an array. I also need the ability to remove those values if the user dis-selects its corresponding checkbox.

I've read this question How to push/pop arrays in Ember.js? and Its probably on the right track, but not quite what I need.

I have:

<label {{bindAttr class='checked:active'}}>
  {{view Ember.Checkbox valueBinding='id' }}
  Select 
</label>

I also need the "active" class to be applied when its checked.

Ideas?

Answer 1

This might give you an idea on how to proceed.

Here is a working demo.

Here's the relevant code. You might want to separate this out as a component for reusability.

App.IndexController = Em.ArrayController.extend({
  selectedOptions: [],

  optionsSelected: function() {
    console.log(this.get('selectedOptions').toArray());
  }.observes('selectedOptions.[]')
});

App.DeveloperController = Ember.ObjectController.extend({

  isChecked: false,

  resetFlag: false,

  _isCheckedChanged: function(){
    if(!this.get('resetFlag')) {
      var isChecked = this.get('isChecked');

      if(isChecked) {
        if(this.get('parentController.selectedOptions').length >= 2) {
          this.set('resetFlag', true);
          this.set('isChecked', false);
        } else {
          this.get('parentController.selectedOptions')
              .addObject(this.get('content'));
        }
      } else {
        this.get('parentController.selectedOptions')
            .removeObject(this.get('content'));
      }
    } else {
      this.set('resetFlag', false);
    }
  }.observes('isChecked')
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each item in model itemController="developer"}}
      <label {{bindAttr class='checked:active'}}>
        {{view Ember.Checkbox checkedBinding="isChecked"}}
        {{item.content}}
      </label>
    {{/each}}
  </ul>
</script>

Answer 2

Here is a working solution, based on Ember Components.

It doesn't handle all edge cases, e.g. bound values that change after the component has rendered, but it does the basics. Can easily be extended if needed.

The array can be constructed using Ember.A(), in order for it to have addObject etc.

---

Component:

App.ArrayCheckboxComponent = Em.Component.extend({

  value: null # included in array when checked
  array: null # array to bind to
  _checked: null # boolean

  init: ->
    @_super.apply(this, arguments)
    array = @get('array')
    unless array.addObject && array.removeObject && array.contains
      throw new Error('Array used for `ArrayCheckboxComponent` must implement addObject/removeObject')
    if array.contains(@get('value'))
      @set('_checked', true)
    else
      @set('_checked', false)

  checkedDidChange: (->
    value = @get('value')
    array = @get('array')
    if @get('_checked')
      array.addObject(value)
    else
      array.removeObject(value)
  ).observes('_checked')

})

Component template:

{{view Em.Checkbox checkedBinding='_checked'}}

Usage:

{{array-checkbox value='item1' arrayBinding='path.to.array'}}

More on components:

http://emberjs.com/guides/components/