Component Attribute Binding is Rendering a String

Question

I'm trying to set up data binding for a component attr, and when I do so my property is returning the a string. I have a custom component class:

App.EditableTextComponent = Ember.Component.extend({
  attributeBindings: ['contenteditable'],

  isEditable: true
});

And, my handlebar template:

<span class="editable-text" {{bind-attr contenteditable=isEditable}}>{{content}}</span>

Whenever I render this template, if isEditable is true, it will render: contenteditable="contenteditable" rather than contenteditable like shown in the example here http://emberjs.com/guides/templates/binding-element-attributes/.

I can get this example to work if I set my isEditable property to a string of "true", but this doesn't seem right, as it should be a boolean for use in other places. How do I get this data binding to work without setting the property to a string?

It lies, it isn't properly supported yet in Ember, you can hack it in, but it needs some actual internals fixed for it to work completely and properly.. stackoverflow.com/questions/24127862/… — Kingpin2k

Panagiotis Panagi Panagiotis Panagi · Accepted Answer · 2014-06-14T06:50:28

App.EditableTextComponent = Ember.Component.extend({
  attributeBindings: ['contenteditable'],

  isEditable: true,

  contenteditable: function() {
    return this.get('isEditable') ? 'true' : 'false';
  }.property('isEditable')
});

Usage:

{{editable-text isEditable=true}}
{{editable-text isEditable=false}}

Component Attribute Binding is Rendering a String

1 Answers