Ember + HTMLBars: "boolean" bound attributes are not booleans

Question

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

Answer 1

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

Answer 2

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

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