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?

chekmare · Accepted Answer · 2017-02-28 11:56:06Z

3

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
   }
}

Here is Ember Twiddle

answered Feb 28, 2017 at 11:56

chekmare

2,0382 gold badges10 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

XYZ · Accepted Answer · 2017-02-27 05:04:03Z

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,

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

If you need to handle actions read here,

https://guides.emberjs.com/v2.11.0/templates/input-helpers/#toc_actions

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, 2017 at 5:04

answered Feb 27, 2017 at 1:40

XYZ

27.8k15 gold badges98 silver badges168 bronze badges

9 Comments

DeividKamui Over a year ago

this works, but now my action does not. Is there a way to trigger the action when the checked changes?

XYZ Over a year ago

What action you need to handle? And what does it used for?

DeividKamui Over a year ago

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.

XYZ Over a year ago

Can you just make the recalculate value to another computed property?

DeividKamui Over a year ago

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()})

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related