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?

score 1 · Accepted Answer · answered May 16 '14 at 03:41

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>

This looks pretty great. I'm going to give it a whirl and get back to you. — JDillon522, May 16 '14 at 13:40
Worked great! Had to tweak a few things to fit my needs but yeah. I didnt even know where to start. And now I know, "and knowing is half the battle." (The trick was passing a specific controller in the `{{#each}}`. Didnt know I could do that) — JDillon522, May 16 '14 at 14:44

score 0 · Answer 2 · answered Jun 16 '14 at 11:52

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/

Ember.js - multiple checkeboxes bound to a single array

2 Answers2