EmberJs：组件模板

Question

我尝试从 http://www.eyecon.ro/bootstrap-colorpicker/ 包装一个 colorPicker 组件
我需要用视图的“值”属性填充模板的“背景颜色 css 属性”... 我尝试设置 {{value}} 但它不起作用...

有什么建议吗？

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

您需要查看 {{bindAttr}} 助手。上面有一篇旧但很好的帖子here

基本上，您不能只将绑定值放入 HTML 标记中，因为它会插入包装脚本标记并破坏所有内容。

您正在寻找的是：

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