Tristate checkbox in ember

Question

I have to implement a tristate checkbox in ember quickly so I was wondering if someone can give me a pointer to an implementation of tristate checkbox in ember?

Answer 1

The current version (2.0) of Ember has support for this with the indeterminate attribute.

{{input type="checkbox" 
    name=name 
    checked=isChecked 
    indeterminate=isIndeterminate}}

http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_checkbox

Answer 2

Don't know if you still need this or not, here's what I used:

FM.TriStateCheckbox = Ember.Checkbox.extend({
  attributeBindings: ['indeterminate'],
  indeterminate: false
})

And you can use it pretty much like normal checkbox

...
<th>{{view FM.TriStateCheckbox checkedBinding="allSelected" indeterminateBinding="someSelected"}}</th>
...

Please note that the binding for indeterminate (i.e. this case someSelected) should also return false when all is selected.

someSelected: function(key, value) {
  if (this.get('allSelected')) { return false }
  return this.get('children').someProperty('isSelected', true)
}.property('children.@each.isSelected')