流星：单击时在模板内渲染模板

Question

I have a Meteor app that has a template loaded. 我有一个已加载模板的Meteor应用程序。 Inside that template I have a button. 在该模板内，我有一个按钮。 When the button is clicked, I want the app to render or switch to another template which also happens to be a modal. 单击按钮时，我希望该应用程序呈现或切换到恰好是模式的另一个模板。

I can't figure out how to render another template from the click event function. 我不知道如何从点击事件功能中渲染另一个模板。

Any ideas? 有任何想法吗？ Here is my code below. 这是下面的代码。

search.html 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 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                  
      });

});

Answer 1

I haven't tried this, but I believe you can use a template helper and a Session variable to accomplish this. 我还没有尝试过，但是我相信您可以使用模板助手和Session变量来完成此任务。

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

and then in your js file... 然后在您的js文件中...

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

The searchCustomer template will only render when the 'showModal' Session variable is true. 仅当'showModal'Session变量为true时，searchCustomer模板才会呈现。

流星：单击时在模板内渲染模板

问题描述

1 个解决方案

解决方案1
3 2015-04-11 02:29:55

流星：单击时在模板内渲染模板

问题描述

1 个解决方案

解决方案1 3 2015-04-11 02:29:55

解决方案1
3 2015-04-11 02:29:55