Метеор с Typeahead: где вызвать 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"> 

JQuery в загробной: функция получает входной сигнал правильно. Но вызов typeahead на входе не активирует typeahead правильно: при вводе ввода ничего не происходит.

Однако, если я завершаю вызов typeahead в setTimeout, он работает.

Конечно, всякий раз, когда вы начинаете обертывать вещи в setTimeouts, что-то не так.

Где и когда правильное место для инициализации typeahead при использовании Iron Router?

Answer 1

Вы можете инициализировать typeahead в функции rendered вашего шаблона. Например:

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

Answer 2

Я понял.

Вы должны убедиться, что любые входы, используемые плагинами, «сохранены», то есть не перерисованы Метером. Самый простой способ сделать это - убедиться, что вход имеет атрибут идентификатора. Таким образом, изменяя условия поиска вклад в это установил его:

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

Соответствующая документация: http://docs.meteor.com/#template_preserve

Answer 3

По Метеор 1.0.3.1 и железо: рабочий раствор router@1.0.7 заключается в установке sergeyt:typeahead и инициализации машинописный, как это :

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

Икон может быть выполнен только один раз для шаблона верхнего уровня.

Answer 4

Я написал статью об этом, вы можете прочитать ее here.

Таким образом, ваша реализация с использованием javascript для выбора и изменения элемента - это плохая практика в реактивной среде. Я пробовал это так, и это огромная боль.

То, что я нашел то, что вы можете создать помощник, который возвращает строку JSON ваших данных машинописных и использовать атрибут источника данных, например, так

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>