Question

在我的流星项目中，我正在使用bootstrap-tagsinput插件：

http://timschlechter.github.io/bootstrap-tagsinput/examples/

我在'typeahead'模式下使用它，因此它需要初始化，如：

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

我无法弄清楚将它与流星整合的最佳方法是什么 - 所以我在征求意见。

我尝试了几种方法：

（1）将初始化代码放在包含输入元素的模板的.created中：

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

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

这似乎很自然。但是，当重新呈现模板时，初始化数据将丢失，输入元素不会像标记输入那样运行。

（2）与（1）相同，但添加{{#constant}}指令。 {{#constant}}指令根据流星文档阻止重新呈现。如果它是init一次并且从不重新渲染，插件应该可以工作：

（顺便说一下，添加div有一个原因，请参阅：）

{{#constant}} 
<div>
  <input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
</div>
{{/constant}}

这失败了：

"Exception from Deps recompute: Error: 
An attempt was made to reference a Node in a context where it does not exist"

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

（3）在.rendered函数中初始化tagsinput：

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

这也失败了，因为插件只接受初始化一次。第二次初始化将不起作用：它期望tagsinput（）arg是一个函数属性名并尝试执行它（或沿着这些行的某些东西）。

（4）我认为我会进一步采取（3）并通过删除初始化数据来超越它：

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

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

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

一旦解决方案尝试（4）运行，偶尔的div将保留在dom中，以及新生成的div。在这一点上，我开始觉得这个解决方案不符合流星精神，但我决定尝试摆脱挥之不去的div：

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

这段代码可以完成工作，但是超级hackish很可能在流星或标签输入更新时中断。

如果你们中的任何一个流星忍者可以告诉正确的方式来初始化标签输入，那就太棒了！

Answer 1

我对typeahead的修复是将所有其他模板的反应区域包裹在隔离区域内：http://docs.meteor.com/#isolate

你必须完成所有这些。

在流星中使用bootstrap-tagsinput插件

1 个答案: