Ember.js：包裝JQuery組件（Minicolors）

Question

我嘗試在Ember.js應用程序中集成Minicolor JQuery組件。 集成應該很容易，但它不爲我工作...（輸入顯示，但沒有JQuery的成分）...

Minicolor集成指南： https://github.com/claviska/jquery-miniColors

從DOC：只需插入js文件和添加下面的輸入：

我的js文件：

App.ColorPicker = Em.TextField.extend({ 
    type: 'minicolors', 
    attributeBindings: ['name'], 
    willInsertElement: function() { 
    ; 
    } 
}); 

HTML文件

{{view App.ColorPicker placeholder="Background color" name="color" valueBinding="App.MyController.backgroundColor"}} 

Answer 1

我相信你的問題是，在minicolors的初始化代碼已經執行後，ember會動態地添加<input type='minicolors' ... />元素，導致你的新minicolors輸入不能被初始化。

我通過使用didInsertElement事件而不是willInsertElement事件來獲得您的示例，以強制minicolors創建動態添加的App.ColorPicker元素。 willInsertElement在要插入元素時觸發，但尚未插入，並且插入元素後將觸發。我使用了minicolors github存儲庫中的最新文件。

App.ColorPicker = Em.TextField.extend({ 
    type: 'minicolors', 
    attributeBindings: ['name'], 
    didInsertElement: function() { 
     $.minicolors.init(); 
    } 
}); 

唯一的其他問題，我不得不被需要，以確保CSS文件，並使用顏色選擇器的圖形元素可以加載的PNG。顯然，如果css和png文件不可加載，那麼js部分不起作用。