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部分不起作用。