在meteor中使用引导标记输入插件

在我的meteor项目中，我正在使用引导标记输入插件：

我在“typeahead”模式下使用它，因此它需要初始化，如下所示：

<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
$('input').tagsinput({
  typeahead: {
    source: function(query) {
      return $.getJSON('citynames.json');
    }
  }
});
</script>

异常堆栈是无用的（大部分是“spark”代码），所以我最终放弃了这个路径（但我怀疑这仍然是最好的方法，只要我能让它工作）

（3） 正在初始化.rendered函数中的标记输入：

template.hello.rendered = function () {
    $('input').tagsinput({...});
}

这也会失败，因为插件只接受一次初始化。第二次初始化将不起作用：它希望tagsinput（）arg是一个函数属性名，并尝试执行它（或类似的操作）

（4） 我想我应该更进一步，通过删除初始化数据来智取它：

template.hello.rendered = function () {
    $('input').removeData('tagsinput');
    $('input').tagsinput({...});
}

这将清除输入元素中的数据['tagsinput']，并允许重复进行tagsinput初始化。一旦数据['tagsinput']不存在，初始化就会进行并重新创建它。 这个技巧几乎解决了这个问题，除了一个小的副作用：一个自动生成的div元素在DOM中徘徊。tagsinput插件的工作方式是在输入元素后添加同级div：

<template name="hello">
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
</template>

template.hello.created = function () {
    $('input').tagsinput({...});
}

<input data-role="tagsinput" ... />
<div class="bootstrap-tagsinput">...</div>   <-- auto-generated by tagsinput

这段代码完成了任务，但它是超级黑客，当meteor或tagsinput更新时，它可能会崩溃

---

如果你们任何一个流星忍者都能说出初始化tagsinput的正确方法，那将是非常棒的

我对typeahead的修复是将模板的所有其他反应区域包装在隔离区域内：

---

你必须在所有这些方面都做到。

你能解释一下为什么这样做有效吗？另外，您选择了哪种方法初始化组件--.rendered还是.created？每次另一个反应区域重新渲染时，它的整个模板都会重新渲染。因此，当整个模板重新呈现您的div并替换为另一个div时，这就是它引发错误的原因。我知道这很糟糕，但他们正在下一个模板版本中修复它。并在渲染时使用它。

template.hello.rendered = function () {
    $('input').removeData('tagsinput');
    $('input').tagsinput({...});
}

<input data-role="tagsinput" ... />
<div class="bootstrap-tagsinput">...</div>   <-- auto-generated by tagsinput

template.hello.rendered = function () {
    $('input').removeData('tagsinput');
    $(".bootstrap-tagsinput").remove();
    $('input').tagsinput({...});
}