Question

我尝试从http://www.eyecon.ro/bootstrap-colorpicker/包裹一个colorPicker组件我需要使用视图的“value”属性填充模板的“background-color 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"});
  }
});

EmberJs：组件模板

1 个答案: