Модальная бутстрап исчезает со сменой события Метеор

Question

Я использую модальный с бутстрапом, поэтому у меня модальный с 3 вкладками. В одном из этой вкладки у меня есть выбор, как это:

 <div class="modal-body"> 

     <ul class="nav nav-tabs" id="TabModal"> 
      <li><a href="#onglet1" data-toggle="tab">Libre</a></li> 
      <li><a href="#onglet2" data-toggle="tab">Complexe</a></li> 
      <li><a href="#onglet3" data-toggle="tab">Questionnaire</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane" id="onglet1"> 
       <span class="label label-primary">Choose your collections :</span><br /><br /> 
       {{>eachCollections}} 

       {{#if collectionChoose 1}} 
        <label style="float:left;">Par : </label> 
        <select class="form-control" style="width:200px;float:left;" id="widgetFilterSelectPanelistes"> 
         <option value="none">-- none --</option> 
         <option value="name">Name</option> 
         <option value="age">Age</option> 
         <option value="city">City</option> 
        </select> 
        {{>eachKeyPanelistes}} 
        {{#if panelistChoose "name"}} 
         <select class="form-control" style="width:200px;"> 
          {{#each panelistes}} 
           <option value="{{name}}">{{nom}}</option> 
          {{/each}} 
         </select> 
        {{/if}} 
       {{else}} 
        {{#if collectionChoose 2}} 
         <p>participants</p> 
        {{/if}} 
       {{/if}} 

В модальном я использую выбрать и при изменении выбора значения I показать другой выбор и т.д. ...

Для этого шаблона I есть JS файл, как это:

Template.eachCollections.helpers({ 
collections : function() { 
    return Collec.find(); 
} 
}); 

Template.eachCollections.events({ 
'change #eachCollectionsSelect' : function() { 
    var selected = document.getElementById('eachCollectionsSelect').value; 
    Session.set('selectedCollections', selected); 
} 
}); 

Template.widgetFilter.collectionChoose = function (param) { 
return parseInt(Session.get('selectedCollections')) === param; 
} 

Но когда я trigge событие на изменение выбора, модальный disepear ...

у вас есть решение?

Answer 1

Я думаю, что этот сценарий происходит под капотом:

• Открывает (шоу) модальный с Javacript JQuery плагин вызовом, который в основном изменяет DOM (добавление классов CSS и вещей, чтобы сделать модальное видимое).
• Тогда событие изменения происходит в модальном режиме, из-за которого Метеор ретранслирует модальный AS, который был ОПРЕДЕЛЕН В ШАБЛОНЕ, уничтожая «показанные» классы css.
• Это приводит к исчезновению модального состояния, поскольку оно переизлучается в скрытом состоянии.

Так какие же жизнеспособные решения?

Во-первых, я сообщу вам, что эта часть Meteor в настоящее время переписывается основными разработчиками (проект Meteor UI), и в ближайшем будущем (1-3 месяца) у нас будет безболезная интеграция плагинов jQuery , потому что рендеринг Meteor DOM больше не уничтожит всю DOM, новый движок достаточно умен, чтобы оставить изменения в атрибутах DOM нетронутыми!

В основном ваш код может работать безболезненно в ближайшем будущем, но не все могут быть достаточно терпеливыми, чтобы ждать, так что вот решение разработчиков Meteor пришло (они реализовали его в примере сторон).

Вам понадобится другая переменная сеанса, представляющая состояние модальности: показанное/скрытое. Если переменная имеет значение true, тогда вызывается шаблон для модального в SHOWN STATE, если он ничего не делает. Это означает, что вам придется отказаться от модальных переходов (fade in/out), но это позволит вашему модальному шаблону нормально переигрывать.

Вот код схеме: (! Используя Bootstrap 3) шаблон

модальный:

<template name="myModal"> 
    {{#if showModal}} 
     <!-- this is the backdrop fully shown from the beginning --> 
     <div class="modal-backdrop fade in"></div> 
     <!-- css ".show" class == modal fully shown --> 
     <div class="modal show"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <form class="form-horizontal"> 
         <div class="modal-header"> 
          <button type="button" class="close" aria-hidden="true">&times;</button> 
          <h4 class="modal-title">Modal Title</h4> 
         </div> 
         <div class="modal-body"> 
          Modal Body 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="cancel btn btn-default">Cancel</button> 
          <button type="submit" class="btn btn-primary">Submit</button> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    {{/id}} 
</template> 

модальный JavaScript:

Template.myModal.created=function(){ 
    Session.set("show-my-modal",false); 
}; 

Template.myModal.helpers({ 
    showModal:function(){ 
     return Session.get("show-my-modal"); 
    } 
}); 

Template.myModal.events({ 
    "click .close, click .cancel":function(){ 
     Session.set("show-my-modal",false); 
    }, 
    "submit form":function(event){ 
     event.preventDefault(); 
     // 
     Session.set("show-my-modal",false); 
    } 
}); 

родительского шаблона:

<template name="parent"> 
    {{> myModal}} 
    <button class="show-my-modal-button" type="button"> 
     Show Modal 
    </button> 
</template> 

родительский javascr ipt:

Template.parent.events({ 
    "click .show-my-modal-button":function(){ 
     Session.set("show-my-modal",true); 
    } 
});