Ember.js：包装JQuery组件（Minicolors）

Question

我尝试将Minicolor JQuery组件集成到Ember.js应用程序中。 集成应该很容易，但是对我来说不起作用...（显示输入但没有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的初始化代码之后，余烬会动态添加<input type='minicolors' ... />元素，从而导致新的minicolors输入未初始化。

我通过使用didInsertElement事件而不是willInsertElement事件来强制您的示例工作，以迫使minicolors创建动态添加的App.ColorPicker元素。 willInsertElement在元素将要插入但尚未插入时触发，并且didInsertElement将在元素插入后触发。 我使用了minicolors github存储库中的最新文件。

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

我唯一的其他问题是需要确保可以加载css文件和带有颜色选择器图形元素的png。 显然，如果css和png文件无法加载，则js部分无法正常工作。