Question

我正在制作一个显示搜索结果的网页。单击“搜索”按钮后，应将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重新渲染模板

1 个答案: