How to set checkbox property checked from model using Ember 2.x?

Question

Is there a way to bind the property of a checkbox to a property in the model, for example:

I have this simple model on a route:

export default Ember.Route.extend({
   model:function(params) {
       return { "isAdmin": true }
   } 
});

And on the template I want to display the checkbox checked when the isAdmin is true:

 <input id="adminControll" name="isAdmin" type="checkbox" onchange={{action "toggleAdmin" model.isAdmin}} />

Any ideas on how to achieve this?

score 3 · Accepted Answer · answered Feb 28 '17 at 11:56

Since Ember 1.13.3 you can do the following:

<input type="checkbox" checked={{model.isAdmin}} 
        onchange={{action "toggleAdmin" value="target.checked"}}>

controller (or component):

actions: {
   toggleAdmin(value) {
      this.set('model.isAdmin', value);
     // Do something useful
   }
}

XY L · Answer 2 · 2017-02-27T05:04:03.440

0

You can use {{input}} helper,

{{input type="checkbox" name="isEmberized" checked=isEmberized}}

And bind the checked property to model.isAdmin

{{input type="checkbox" name="isEmberized" checked=model.isAdmin}}

A working sample is here (via ember-twiddle.com).

You can read more about how to use the input (checkbox in this case) Ember helper at link below,

If you need to handle actions read here,

If you really do NOT want to user the input helper, set the value attribute for the input HTML element instead of passing it to the action.

Let me know if above info. solve your problem.

edited Feb 27 '17 at 05:04

answered Feb 27 '17 at 01:40

XY L

this works, but now my action does not. Is there a way to trigger the action when the checked changes? – DeividKamui Feb 27 '17 at 05:01
What action you need to handle? And what does it used for? – XY L Feb 27 '17 at 05:04
when the checked value changes I need to recalculate some values, if my user is an admin I query an ajax service to get the current rate of discount. – DeividKamui Feb 27 '17 at 05:06
Can you just make the recalculate value to another computed property? – XY L Feb 27 '17 at 05:07
I don't think so, because my model is a custom model created from many data sources. Basically my model is a return Ember.$.ajax().then(function () { return Ember.$.ajax()}) – DeividKamui Feb 27 '17 at 05:12
I see, I am working on a minimal demo to meet your requirement – XY L Feb 27 '17 at 05:13
I have checked the documentation which state that the input `checkbox` does not provide an action. The solution is to create an observer function which observe the value of the checkbox and get called everytime the value changes. http://stackoverflow.com/a/24155149/2226315 – XY L Feb 27 '17 at 05:20
Yes that works. I just have to use a self reference in order to call the actions – DeividKamui Feb 27 '17 at 05:43
Good job! Glad you have figure out by yourself. Read the doc throughly if you have spared time which make you a power user for anything! – XY L Feb 27 '17 at 05:44

2 Answers2