1

http://www.eyecon.ro/bootstrap-colorpicker/からcolorPickerコンポーネントをラップしようとしてい
ます。テンプレートの「background-colorcss属性」にビューの「value」属性を入力する必要があります...I {{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"}}
4

1 に答える 1

2

{{bindAttr}}ヘルパーを調べる必要があります。ここに古いが良い投稿があります

基本的に、バインドされた値を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"});
  }
});
于 2012-12-27T10:30:39.350 に答える