0

Iron Router で Meteor を使用していますが、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 を使用する場合、先行入力を初期化する正しい場所はいつですか?

4

4 に答える 4

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

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 次のように先行入力をインストールして初期化することです。

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

初期化は、最上位のテンプレートに対して 1 回だけ実行できます。

于 2015-01-30T02:07:21.333 に答える
0

これについて記事を書いたので、ここで読むことができます。

要約すると、javascript を使用して要素を選択および変更する実装は、リアクティブ環境では悪い習慣です。私はそのように試しましたが、それは大きな苦痛です。

私が見つけたのは、先行入力データの 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 に答える