EmberJs：組件模板

我嘗試從http://www.eyecon.ro/bootstrap-colorpicker/
換一個ColorPicker組件我需要填寫模板的「背景色CSS屬性」與視圖的「值」屬性... 我試圖設置{{價值}}，但它不工作...EmberJs：組件模板

任何意見？

的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"}}

來源

2012-12-26 fvisticot

嘗試=的ValueBinding 「view.value」，而不是「THIS.VALUE」 –

隨着view.value我有以下結果：<我的風格=「背景-color：< script id ='metamorph-0-start'type ='text/x-placeholder'> </script > rgb（255，30，0）< script id ='metamorph-0-end'type =' text/x-placeholder'> </script >「> – fvisticot

你可以發佈一個小提琴什麼的，因爲這很難調試！ –

你需要尋找到{{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"}); 
    } 
});

來源

2012-12-27 10:30:39

Tx很多！工作正常。我認爲iStyle的功能應該是返回「背景顏色」... – fvisticot

你是對的，改變了，我是一個咖啡標記的傢伙，所以我總是忘記當我改變這些天回去 –

EmberJs：組件模板

回答

相關問題