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将触发，但尚未插入元素，并且在插入元素后将触发didInsertElement。我使用了minicolors github存储库中的最新文件。

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

我唯一的另一个问题是需要确保可以加载css文件和带有颜色选择器图形元素的png。显然，如果css和png文件不可加载，则js部分不起作用。

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

1 个答案: