SelectionBinding for checkbox in EmberJs

Question

Does Emberjs provide a selectionBinding for a flag to handle selected / set flags.

If so, how to do it?

Answer 1

Bind to the checked Ember.Checkbox property, see http://jsfiddle.net/5pnVg/ :

Rudders

 {{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 already a bit, but I also came across this. I had checkbox options delivered to the route model in the array. The problem is to achieve two-way binding (if that is the goal). Here is how I did 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 set up the properties to set myself based on their presence in the array of model forms and set an observer who checks these properties to reset the array of model forms, if necessary. Now in the Item template, we can snap to the shapes, as we always do (how you do it):

 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 properties of the editing controller:

 Shapes: Round: {{input type="checkbox" checked=isRound}} Oval: {{input type="checkbox" checked=isOval}} Irregular: {{input type="checkbox" checked=isIrregular}} 

Hope this helps anyone struggling with this type of manual two-way snapping, and you will get all your checked options in your model in one go.