单击按钮后流星重新呈现模板

问题描述：

我正在工作一个网页，它将显示搜索结果。单击“搜索”按钮后，应该将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'); 
 
    } 
 
});

答

使用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'); 
    } 
});

你也可以只存储在Session/ReactiveVarsearchName，做数据库查询中getInfo，这样的模板将如果数据库的变化自动重新呈现。

单击按钮后流星重新呈现模板

相关推荐