Ember + HTMLBars: Boolean Attributes Not Logical

Question

I am porting the Ember 1.5 Handlebars application to the current stable Ember and HTMLBars, and it seems that the bound controller property should return "disabled" or null to work, as expected, with disabled DOM attributes.

 <button disabled={{isDisabled}}> 

In Handlebars, the isDisabled property is Boolean, and all is well.

In HTMLBars it seems to me:

 Ember.Controller.extend({ isDisabled: function() { if(this.get('itemSelected')){ return null; } else { return 'disabled'; } }.property('itemSelected') }); 

It is right? This, of course, is a problem, since it is expected that the Boolean property will be, Boolean, logical in the rest of the application, therefore, to make it work as expected, I will need to add an additional computable property to control the "boolean-ish" with the attribute "string"/null .

Has anyone else encountered this, or a related issue with "checked"?

Using:
Ember 1.11.3 + HTMLBars
ember-cli 0.2.3

Answer 1

I came up with a reasonable solution for this using a related 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}}"> 

Answer 2

I just ran into the exact same thing and I found a shorter solution that works for me.

 <button disabled={{if itemSelected true null}}>a button<button>