I'm migrating an Ember 1.5 Handlebars app to current stable Ember and HTMLBars and it seems that a bound controller property must return "disabled"
or null
to work as expected with "disabled" DOM attributes.
<button disabled={{isDisabled}}>
In Handlebars isDisabled
property is a boolean and all is well.
In HTMLBars it seems I need:
Ember.Controller.extend({
isDisabled: function() {
if(this.get('itemSelected')){
return null;
} else {
return 'disabled';
}
}.property('itemSelected')
});
Is this correct? This presents a problem of course since a boolean property is expected to be, well, a boolean in the rest of the app, so to get this to work as expected I'll need to add an additional computed property to drive the "boolean-ish" DOM attribute with a "string"/null
value set.
Has anyone else encountered this, or the related issue with "checked"?
Using:
Ember 1.11.3 + HTMLBars
ember-cli 0.2.3
I came up with a reasonable solution for this by using a bound helper.
// ../helpers/boolean-disabled.js
import Ember from 'ember';
export function booleanDisabled(params/*, hash*/) {
var disabled = params[0];
if(disabled) {
return 'disabled';
} else {
return null;
}
}
export default Ember.HTMLBars.makeBoundHelper(booleanDisabled);
Then in the template
<button disabled="{{boolean-disabled itemSelected}}">