0

我正在使用带有 Iron Router 的 Meteor，并且似乎无法提前输入（此版本：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 的正确位置？

4

4 回答 4

0

rendered您可以在模板的功能中初始化预输入。例如：

Template.mytemplate.rendered = function() {
      $('.input-search').typeahead({
        source: tags,
        updater: function(item) {
          Router.go('/projects/tag/' + item);
        }
      });
};
于 2014-01-20T21:00:01.267 回答
0

从 Meteor 1.0.3.1 和 iron:router@1.0.7 开始，工作解决方案是sergeyt:typeahead 像这样安装和初始化 typeahead：

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

对于顶级模板，初始化只能执行一次。

于 2015-01-30T02:07:21.333 回答
0

我想到了。

您需要确保插件使用的任何输入都被 Meteor “保留”，即不重新渲染。最简单的方法是确保输入具有 ID 属性。因此，将我的搜索输入更改为此修复了它：

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

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

于 2014-01-22T07:08:47.993 回答
0

我写了一篇关于这个的文章，你可以在这里阅读。

总之，您使用 javascript 来选择和更改元素的实现在反应式环境中是不好的做法。我已经尝试过这种方式，这是一个巨大的痛苦。

我发现你可以创建一个帮助器，它返回你的 typeahead 数据的 JSON 字符串并使用 data-source 属性，就像这样

JS

Template.myHelper.helper({
  typeahead : function(){
    return JSON.stringify(Session.get("typeahead"));
  }
});

HTML

<template name="myTemplate">
    <input data-source="{{typeahead}}" data-provide="typeahead" id="blah" type="text" />
</template>
于 2015-12-21T06:59:39.127 回答