title: EmberJs: component template
body: <p>I try to wrap a colorPicker component from <a href="http://www.eyecon.ro/bootstrap-colorpicker/" rel="nofollow">http://www.eyecon.ro/bootstrap-colorpicker/</a><br>
  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...</p>
  
  <p>Any advice ?</p>
  
  <p>JavaScript: </p>
  
  <pre><code>App.ColorPicker = Em.View.extend({
        classNames: 'input-append color',
        attributeBindings: ['name', 'value'],
        value: '',
        template: Ember.Handlebars.compile('{{view Ember.TextField valueBinding="this.value"}}&lt;span class="add-on"&gt;&lt;i style="background-color: {{value}}"&gt;&lt;/i&gt;&lt;/span&gt;'),
        didInsertElement: function() {
              $('#backgroundColor').colorpicker({format: "rgb"});
        }
      })
  
  ;
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>{{view App.ColorPicker placeholder="Background color" name="backgroundColor" valueBinding="App.controller" classNames="input-large" id="backgroundColor"}}
  </code></pre>