带有typeahead的Meteor :在哪里调用input元素的typeahead()？

Question

我正在使用Meteor和Iron Router，但似乎无法使用typeahead (此版本：https://github.com/bassjobsen/Bootstrap-3-Typeahead)。

下面是一些代码：

HomeController = RouteController.extend({
  //....
  after: function () {
    var tags = this.getData().tags;
    console.log(tags);
    if(tags.length > 0) {
      var tags = ['hello', 'world'];
      console.log("Adding typeahead for tags to ", $('.input-search')[0]);
      console.log("tags: ", tags);
      $('.input-search').typeahead({
        source: tags,
        updater: function(item) {
          Router.go('/projects/tag/' + item);
        }
      });
    }
  },

我有一个标题，它是应用程序布局的一部分，输入如下：

<input type="text" class="form-control input-search" data-provide="typeahead" placeholder="Search">

after:函数中的jQuery正确地获取了输入。但是，在输入上调用typeahead似乎并不能正确地激活typeahead :当输入输入时，什么也没有发生。

但是，如果我将typeahead调用包装在一个setTimeout中，它确实可以工作。

当然，每当您开始在setTimeouts中包装东西时，都会有一些不正确的地方。

使用Iron Router时，在哪里/什么时候初始化typeahead是正确的？

Answer 1

您可以在模板的rendered函数中初始化typeahead。例如：

Template.mytemplate.rendered = function() {
      $('.input-search').typeahead({
        source: tags,
        updater: function(item) {
          Router.go('/projects/tag/' + item);
        }
      });
};

Answer 2

我想通了。

你需要确保插件使用的任何输入都被Meteor“保存”，也就是不会重新渲染。要做到这一点，最简单的方法是确保输入具有ID属性。所以把我的搜索输入改成这样就解决了这个问题：

<input type="text" id="input-search" class="form-control" data-provide="typeahead" placeholder="Search">

相关文档：http://docs.meteor.com/#template_preserve

Answer 3

对于Meteor 1.0.3.1和iron:router@1.0.7的工作解决方案是这样安装sergeyt:typeahead和初始化typeahead：

Template.MyTemplate.rendered = function () {
    Meteor.typeahead.inject();
}

顶层模板只能初始化一次。