ember.js - 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

我相信您的问题是，在miniminis的初始化代码已经执行之后， Ember 会动态添加<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部分无效。