Шаблон повторного рендеринга Meteor после нажатия кнопки

Я работаю на веб-странице, которая покажет результаты поиска. После нажатия кнопки "поиск" в шаблоне должен быть динамически передан массив 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');
   }
});

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Таким образом, шаблон будет автоматически перерисован, если база данных изменится.

Другие вопросы по тегам