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

Question

我正在制作一个将显示搜索结果的网页。单击 "search" 按钮后，应动态将 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');
   }
});

Answer 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 中执行数据库查询，这样模板将自动重新呈现如果数据库变化。

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

Meteor re-render template after a button is clicked

templates

dynamic

rerender

meteor

meteor-blaze