Использование самозагрузки-tagsinput плагин в метеора

Question

В моем метеора проекте я использую самозагрузки-tagsinput плагин:

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

Я использую его в режиме «машинописный», и поэтому он требует инициализации, как в:

<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}} предотвращает повторный рендеринг в соответствии с документами метеоров. Плагин должен просто работать, если он инициализации один раз и никогда не будет повторно вынесено:

(кстати, есть причина для добавленного 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" 

Стек исключений был бесполезным (в основном, «искровым» кодом), поэтому я оставил этот путь (но я подозреваю, что это по-прежнему лучший способ, если только я могу заставить его работать).

(3) Инициализация tagsinput в .rendered функции:

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

Это также терпит неудачу, потому что плагин принимает инициализацию ровно один раз. Вторая инициализация не будет работать: она ожидает, что tagin() arg является именем свойства функции и пытается ее выполнить (или что-то в этом направлении).

(4) Я думал взять (3) дополнительно и перехитрить его удалением инициализированному данные:

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

Это очищает данные [ «»] tagsinput на входном элементе и позволяет для многократного tagsinput инициализация. Как только данные ['tagsinput'] не существуют, инициализация проходит и воссоздает его. Этот трюк почти решил его, за исключением небольшого побочного эффекта: автогенерированный элемент div задерживается в DOM. Путь tagsinput плагин работает путем добавления родственного DIV после ввода элемента:

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

После попытки решения (4) прогонов, случайный ДИВ как таковой будет оставаться в йот, наряду с вновь сгенерированного дел. В этот момент я начал чувствовать, что это решение не соответствует метеоритному духу, но я решил попробовать избавиться от затяжных DIV с помощью:

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

Этого код получает работу, но это супер хак и он, вероятно, сломается, когда обновляются метеориты или метки.

Если какой-либо из вас метеор-ниндзя может указать правильный способ инициализации тегов, это было бы замечательно!

Answer 1

Мой фикс с машинописным обмотать все другие реакционноспособные области шаблона в отдельных регионах: http://docs.meteor.com/#isolate

Вы должны сделать во всех из них.