Ember.js checkbox binding initial value set incorrectly

Question

Somehow the checkbox in my Ember app is always initially checked.

...
{{#each model.fields}}
...
  {{input type="checkbox" checked=isOptional}}

The fields array is an attribute in my model. Each object in fields array has an attribute called isOptional, which can be "true" or "false".

For some reason, regardless of the value of isOptional, the checkbox is initially checked.

If I check the checkbox manually, the isOptional flag will actually be changed. So the binding works except for detecting the initial value.

Any help is much appreciated, thanks!

Edit: As discussed in comments, the problem was because my model was returned by Ember.$.getJSON(), which has "false" in quotes and was interpreted as true value, resulting in checked checkboxes. I resolved this by over-writing the boolean values:

model.fields.forEach(function(field, i) {
  Ember.set(field, 'isOptional', (field.isOptional == 'true'));
});

Are you sure that there isn't ANY value in the isOptional property? Having ANY value besides false, null, or undefined will result in a checked box. — PW Kad
Thanks, I think that's likely to be the problem! I use "Ember.$.getJSON" to get my model, which returns "false" in quotes. Is there a simple way to ask Ember to interpret it as boolean? — Daniel
I believe this may prove useful - emberjs.com/api/data/classes/DS.BooleanTransform.html - but TBH I don't use Ember.Data so there may be a better resource than me. — PW Kad
Thanks. No I'm not using Ember data either, maybe later when it's no longer beta. — Daniel

TameBadger TameBadger · Accepted Answer · 2014-07-07T14:26:50

A jsbin example you can fiddle with http://emberjs.jsbin.com/kukokiti/1/

If you can provide your own jsbin, we can help out more.

EDIT: You can see the effects of the 'false', in a string value.

The easiest way might be to define a computed property on the model you are using.

Ember.js checkbox binding initial value set incorrectly

1 Answers