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