Meteor on change change update Элемент выбора шаблона

Question

Я использую bootstrap-select, чтобы помочь вам выбрать элементы лучше в моем приложении Meteor.

Однако я столкнулся с проблемой, когда после внесения изменений в Метеорную коллекцию реакционная способность отталкивается, возвращается к шаблонам, таким образом переписывая элементы выбора и уничтожая исходный элемент выбора, который также забирает вещи bootstrap-select ,

Интересно, есть ли у меня способ предотвратить это каким-то образом. Я попытался прослушать изменения и вспомнить selectpicker после обновления, но он не работает.

Applications.find().observe({ 
changed: function() { 
    console.log('something changed'); 
      $('.selectpicker').selectpicker(); 
} 
}); 

Я даже пытаюсь немного отложить дело, также безрезультатно.

Applications.find().observe({ 
changed: function() { 
    console.log('something changed'); 
    setTimeout(function(){ 
     $('.selectpicker').selectpicker(); 
     console.log('trying to update select picker'); 
    }, 1000); 
} 
}); 

Неужели кто-нибудь сталкивается с этой проблемой раньше и знает, как ее исправить?

EDIT: Вот код шаблона

<div class="form-group"> 
    <label for="college" class="control-label">College/ University</label> 
    <select class="selectpicker" name="college" placeholder="Select a College/ University"> 
     {{#each colleges}} 
      <option value="{{slug}}">{{name}}</option> 
     {{/each}} 
    </select> 
</div> 

Answer 1

В вашем HTML-шаблон, если окружить Select-элемент с the constant block helper, часть внутри постоянного блока не будет повторно вынесено. Может быть, это будет решение?

Answer 2

У меня была та же проблема. Оказывается, что удаление пакета «сохранение-входы» из моего приложения Meteor помогло. Может быть, стоит попробовать? Или, если вы не хотите этого делать, использование атрибутов id и/или имени из вашего элемента select, похоже, оказывает такое же влияние.

Answer 3

С тех пор как задавался этот вопрос, ситуация немного изменилась. С новым движком рендеринга Blaze визуализированное событие будет выбрано только один раз. Во время рендеринга параметры недоступны, в результате получается приятный, но пустой выбор.

Следующий пример позаботится об этих изменениях. Трюк состоит в том, чтобы отобразить selectpicker один раз при запуске, а затем обновлять каждый раз, когда есть изменение в опции. Поэтому <option> необходимо перенести в собственный шаблонный блок.

Шаблон:

<template name="whatever"> 
<div class="form-group"> 
    <label for="college" class="control-label">College/ University</label> 
    <select class="selectpicker" name="college" placeholder="Select a College/ University"> 
     {{#each colleges}} 
      {{> selectOption}} 
     {{/each}} 
    </select> 
</div> 
</template> 

<template name="selectOption"> 
    <option value="{{slug}}">{{name}}</option> 
</template> 

JavaScript:

Template.whatever.rendered = function(){ 
    $('.selectpicker').selectpicker(); 
}; 

var renderTimeout = false; 
Template.selectOption.rendered = function(){ 
    if(renderTimeout !== false) { 
    Meteor.clearTimeout(renderTimeout); 
    } 
    renderTimeout = Meteor.setTimeout(function() { 
    $('.selectpicker').selectpicker("refresh"); 
    renderTimeout = false; 
    }, 10) 
}; 

Освежающий немного сложнее. Когда вы загружаете свою коллекцию в select, событие будет выбрано для каждой опции. В моем случае у меня есть сотни документов/вариантов. Это приводит к обновлению сотни раз, и браузер зависает в течение нескольких секунд. Поэтому есть небольшой тайм-аут, который заботится об освежении только один раз для большинства изменений.