SelectionBinding for Checkbox in EmberJs - checkbox

Question

Does Emberjs provide selectionBinding for the checkbox to handle selected/checked checkbox options.
If yes, how to do it?

Answer 1

Bind to the checked property of Ember.Checkbox, see http://jsfiddle.net/5pnVg/:
Handlebars:
{{view Ember.Checkbox checkedBinding="App.objController.isChecked" }}
JavaScript:
App.objController = Ember.Object.create({
isChecked: true,
_isCheckedChanged: function(){
var isChecked = this.get('isChecked');
console.log( 'isChecked changed to %#'.fmt(isChecked) );
}.observes('isChecked')
});​

Answer 2

Okay, so this is kinda old but I stumbled upon this too. I had my checkbox options delivered to the route's model in an array. The problem really is with achieving two way binding (if this is the goal). This is how I've done it:
App.ItemEditController = Ember.ObjectController.extend({
isRound: function () {
return ( this.get('model.shapes').find(function(item) { return (item === 'round') }) );
}.property('model.shapes'),
isOval: function () {
return ( this.get('model.shapes').find(function(item) { return (item === 'oval') }) );
}.property('model.shapes'),
isIrregular: function () {
return ( this.get('model.shapes').find(function(item) { return (item === 'irregular') }) );
}.property('model.shapes'),
shapes: function () {
var self = this;
['round','oval','irregular'].map(function(item) {
var shapes = self.get('model.shapes');
shapes = shapes.toArray();
if (self.get('is' + item.capitalize())) {
if (shapes.indexOf(item) < 0)
shapes.push(item);
} else {
if (shapes.indexOf(item) >= 0)
shapes.splice(shapes.indexOf(item),1);
}
self.set('model.shapes', shapes);
});
}.observes('isRound', 'isOval', 'isIrregular')
});
So here I've setup the properties to set themselves based on their presence in the model's shapes array and set an observer that checks these properties to resets the model's shapes array if required.
Now in the Item template we can bind to the shapes as we always do (however you do):
Shapes:
{{#each shape in this.shapes}}
<span class="label label-default">{{shape}}</span><br />
{{else}}
No shape selected!
{{/each}}
and in the ItemEdit template we bind to the edit controller's properties:
Shapes:
Round: {{input type="checkbox" checked=isRound}}
Oval: {{input type="checkbox" checked=isOval}}
Irregular: {{input type="checkbox" checked=isIrregular}}
Hope this helps with anyone struggling with this type of manual two way binding and you'll get all your checked options in your model in one go.