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

Question

我尝试在 Ember.js 应用程序中集成 Minicolor JQuery 组件。集成应该很容易，但它对我不起作用......（显示输入但没有 JQuery 组件）......

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

从文档：只需插入 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

我相信您的问题是 ember<input type='minicolors' ... />在 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 部分不起作用。