Can you bind a checkbox to multiple booleans?

1

I have a component FilterOptions with child components FilterOption. FilterOptions has a checkbox for select all and FilterOption has a checkbox to select itself. When I bind to the boolean like so:

<script type="text/x-handlebars" id="components/filter-option">
  <label>{{input type="checkbox" checked=isSelected}}{{name}}</label>
</script>

Is there a way to not only bind to the FilterOption “isSelected” but also the parent’s “hasSelectedAll”?

2

You could create a computed property on your controller and bind to that right? =)

3

Sure, in the FilterOptionComponent class you could add an observer for the parent’s hasSelectedAll, and respond to changes (e.g. depending the behaviour you want, do this.set('isSelected', true) when the parent’s property becomes true). You would also want the parent’s property to track the collective state of its child components, to uncheck itself when you uncheck a child component.

There are a few ways to set up the dependencies between an “All” checkbox and the others, but I think they would all internally make use of childViews and parentView component properties.

4

Yeah I was thinking of having the child have a oneway relationship to the parent like this:

isSelected: Ember.computed.oneWay(‘FilterOptionsComponent.hasSelectAll’)

I can’t get it to seem to work though. Here’s my parent component:

<script type="text/x-handlebars" id="components/filter-options">
      <h2>{{input type="checkbox" checked=hasSelectAll}} Filter Options</h2>
</script

I imagine its how I’m referencing it there in the oneWay call. I’ve also tried:

isSelected: Ember.computed.oneWay(‘components/filter-options.hasSelectAll’)

and

isSelected: Ember.computed.oneWay(‘filter-options.hasSelectAll’)

Any ideas?