EmberJs: component template - ember.js

Question

I try to wrap a colorPicker component from http://www.eyecon.ro/bootstrap-colorpicker/
I need to fill the "background-color css attribute" of the template with the "value" attribute of the view...
I have tried to set {{value}} but it does not work...
Any advice ?
JavaScript:
App.ColorPicker = Em.View.extend({
classNames: 'input-append color',
attributeBindings: ['name', 'value'],
value: '',
template: Ember.Handlebars.compile('{{view Ember.TextField valueBinding="this.value"}}<span class="add-on"><i style="background-color: {{value}}"></i></span>'),
didInsertElement: function() {
$('#backgroundColor').colorpicker({format: "rgb"});
}
})
;
html:
{{view App.ColorPicker placeholder="Background color" name="backgroundColor" valueBinding="App.controller" classNames="input-large" id="backgroundColor"}}

Answer 1

You need to look into the {{bindAttr}} helper. There is an old but good post on it here
Basically, you can't just drop bound values into HTML tags as it then inserts the wrapper script tags and breaks everything.
What you're looking for is:
App.ColorPicker = Em.View.extend({
classNames: 'input-append color',
attributeBindings: ['name', 'value'],
value: '',
template: Ember.Handlebars.compile('{{view Ember.TextField valueBinding="this.value"}}<span class="add-on"><i {{bindAttr style="view.iStyle"}}></i></span>'),
iStyle: function() {
return "background-color:" + this.get('value');
}.property('value'),
didInsertElement: function() {
$('#backgroundColor').colorpicker({format: "rgb"});
}
});