ボタンをクリックした後のメテオの再レンダリングテンプレート

Question

検索結果を表示するWebページを作成しています。 「検索」ボタンをクリックした後、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'); 
 
    } 
 
});

： はここに私のコードです3210

Answer 1

通常の変数search_arrayの代わりにSessionの変数またはReactiveVarを使用します。このようにしてテンプレートを変更すると、テンプレートは自動的に更新されます。

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/ReactiveVarでsearchNameを保存し、getInfoでデータベースクエリを行うことができ、そのようにテンプレートデータベースが変更された場合、自動的に再レン​​ダリングされます。