Question

我正在尝试将此jQuery插件https://github.com/xoxco/jQuery-Tags-Input转换为Ember组件。

import Ember from 'ember';

export default Ember.Component.extend({

tagName : "input",
type : "text",
attributeBindings : [ "name", "type", "value", "id"],

_initialize: function() {

    Ember.assert("Tags Input has to exist on Ember.$.fn.tagsInput", typeof Ember.$.fn.tagsInput === "function");

    this.$('#tags').tagsInput({'width':'100px'});

}.on('didInsertElement')
});

然后在我的手柄文件{{tag-input id="tags"}}

中

但似乎jQuery没有工作，因为它只是一个标准的输入框。这是生成的HTML <input id="tags" class="ember-view" type="text"></input>

但是如果我将this.$('#tags').tagsInput({'width':'100px'});复制到控制台并运行它，则该元素会使用该插件。

插件不会在didInsertElement上触发的原因是什么？

Answer 1

除了kunerd所说的内容之外，您可能需要通过将代码安排到运行循环中的render(contentType: "application/json") {[assignedSchol:assignedSchol,scholType:scholType]}队列来完成所有内容的计划，如下所示：

afterRender

_initialize: function({ Ember.run.scheduleOnce('afterRender', this, function() { this.$().tagsInput({'width': '100px'}); }); }).on('didInsertElement')是一个稍微复杂的话题，但基本上是按顺序排列＆＃34;队列＆＃34; Ember将关闭，Ember.run队列是在渲染完所有内容后发生的队列。

此处为a pretty good blogpost on Ember.run，此处为an even more in-depth book-like repository on it。

Answer 2

您的问题是this.$("#tags")在组件DOM元素中搜索ID为：tags的DOM元素。

要解决您的问题，请改用this.$().tagsInput({..})。

另请参阅this JSBin了解工作示例。

Answer 3

将setup jquery代码添加到您的component.js中，如下所示：

import Ember from 'ember';

export default Ember.Component.extend({

tagName : "input",
type : "text",
attributeBindings : [ "name", "type", "value", "id"],

setupTagsInputPlugin: Ember.on('didRender', function() {
    this.$("#tags").tagsInput({
width:"100px"
    });
  }),

});

jQuery插件进入Ember组件

3 个答案: