2015-04-11 6 views
1

У меня есть приложение Meteor, в котором установлен шаблон. Внутри этого шаблона у меня есть кнопка. Когда кнопка нажата, я хочу, чтобы приложение отображалось или переключалось на другой шаблон, который также является модальным.Метеор: визуализировать шаблон внутри шаблона при нажатии

Я не могу понять, как отобразить другой шаблон из функции события click.

Любые идеи? Вот мой код ниже.

search.html

<template name='search'> 

    <button class='btn btn-primary' id='showModalButton'>Show Modal</button> 

</template> 

<template name='searchCustomer'> 

    <!-- set up the modal to start hidden and fade in and out --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title">Modal title</h4> 
     </div> 
      <!-- dialog body --> 
      <div class="modal-body"> 
       My modal body 
      <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div> 
     </div> 
     </div> 
    </div> 

</template> 

search.js

Template.search.onRendered(function() { 
    'click #showModalButton': { 
     // WHAT DO I DO HERE TO RENDER OR CALL THE 
     // SEARCHCUSTOMER TEMPLATE WITH THE MODAL? 
    } 

}); 

Template.searchCustomer.onRendered(function() { 

    $("#myModal").on("show", function() {  
      $("#myModal a.btn").on("click", function(e) { 
       $("#myModal").modal('hide'); 
      }); 
     }); 

     $("#myModal").on("hide", function() {  
      $("#myModal a.btn").off("click"); 
     }); 

     $("#myModal").on("hidden", function() { 
      $("#myModal").remove(); 
     }); 

     $("#myModal").modal({      
     "backdrop" : "static", 
     "keyboard" : true, 
     "show"  : true // show the modal immediately     
     }); 

}); 

ответ

2

Я не пробовал это, но я полагаю, вы можете использовать вспомогательный шаблон и переменную Session для выполнения это.

<body> 
    {{> search }} 
    {{#if showModal }} 
    {{> searchCustomer }} 
    {{/if}} 
</body> 

, а затем в файле JS ...

Template.search.helpers({ 
    'showModal': function(){ 
     return Session.get('showModal'); 
    } 
    'click #showModalButton': function(){ 
     Session.set('showModal', true); 
    } 
); 

Шаблон searchCustomer будет оказывать только тогда, когда переменная сеанса в 'ShowModal' истинно.