单击按钮后流星重新渲染模板答案

【问题标题】：Meteor re-render template after a button is clicked单击按钮后流星重新渲染模板
【发布时间】：2017-11-30 04:45:27
【问题描述】：

我正在制作一个显示搜索结果的网页。单击“搜索”按钮后，应该将 search_array 动态传递到模板中。单击按钮后如何动态刷新模板？这是我的代码：

search_post.html

<div class="form-group">
  <label class="control-label" for="title">search by name</label>
  <div class="controls">
      <input name="SearchName" id="SearchName" type="text" value="" placeholder="enter the name" class="form-control"/>
  </div>
</div>
<input type="submit" value="Search" class="btn btn-primary" />

<div id="info" style="display: block; margin-top: 5%">
   {{#if show}}
   {{#each getInfo}}
      {{> postItem}}
   {{/each}}
   {{/if}}
</div>

search_post.js

var search_array;
Template.postSearch.events({
  'click .btn': function() {   
     search_array = Posts.find({person_name: document.getElementsByName('SearchName')[0].value});
     Session.set('show', true);
  }
});

Template.postSearch.helpers({
  getInfo: function() {
     return search_array
  },

  show: function(){
        return Session.get('show');
   }
});

【问题讨论】：

标签： templates meteor dynamic meteor-blaze rerender

【解决方案1】：

使用Session 变量或ReactiveVar 而不是普通变量search_array。这样，当您更改它时，模板会自动更新。

Template.postSearch.events({
    'click .btn': function () {
        let searchName = document.getElementsByName('SearchName')[0].value;
        Session.set('searchArray', Posts.find({person_name: searchName}).fetch());
        Session.set('show', true);
    }
});

Template.postSearch.helpers({
    getInfo() {
        return Session.get('searchArray');
    }
});

您也可以将searchName 存储在Session/ReactiveVar 中并在getInfo 中进行数据库查询，这样如果数据库发生更改，模板将自动重新呈现。

【讨论】：