多個文本輸入的多個事件地圖和助手

Question

我有一個會話這個助手和事件地圖。該事件正在偵聽按鈕單擊，然後從輸入字段中抓取輸入文本。然後它設置會話。助手獲取會話並在CampYear（收集字段之一）的集合上執行find（）。

Session.setDefault('keyCampYear', ''); 

Template.camp.helpers({ 
    'Query': function() { 
    var cy = Session.get('keyCampYear'); 
    return Programs.find({CampYear: cy}).fetch(); 
    } 
}); 

Template.query.events({ 
    'click #camp-year-button': function(event) { 
    var campYearTemp = document.getElementById('camp-year').value; 
    Session.set('keyCampYear', campYearTemp); 
    } 
}); 

輸出設置與spacebars {{#each}}來呈現一個表：

<tbody> 
    {{#each Query}} 
     <tr> 
     <td>{{Fname}}</td> 
     <td>{{Lname}}</td> 
     <td>{{CampYear}}</td> 
     </tr> 
    {{/each}} 
</tbody> 

這按預期工作。我現在需要添加另一個文本字段和按鈕來查詢數據庫中的不同字段，並輸出到相同的空格鍵{{#each}}。但我無法讓它工作。添加另一個事件映射，Session和helper似乎不起作用。有沒有一種方法可以讓我的另一個輸入字段使用其按鈕來搜索集合中的不同字段並在相同的空格鍵上輸出{{#each}}？

非工作下面的代碼：

添加文本框和按鈕：

<input type="text" id="donate"> 
<button id="donate-button">GO</button> 

添加新的事件映射，助手和會話：

Session.setDefault('keyDonate', ''); 

Template.camp.helpers({ 
    'Query': function() { 
    var don = Session.get('keyDonate'); 
    return Programs.find({DONATE: don}).fetch(); 
    } 
}); 

Template.query.events({ 
    'click #donate-button': function() { 
    var donateTemp = parseInt(document.getElementById('donate').value, 10); 
    Session.set('keyDonate', donateTemp); 
} 
}); 

什麼最終發生的是，默認情況下整個Mongo集合在瀏覽器中加載，而用戶不必單擊任一按鈕。第一個按鈕和文本框不可操作，新創建的按鈕和文本框工作，但非常緩慢。

Answer 1

看起來像我找到了解決方案。我不熟悉流星足以知道這是解決方案，但這就是我所做的。首先，以防止在頁面上加載整個集合，兩個會話必須設置爲未定義默認：

Session.setDefault('key', undefined); 

不是：

Session.setDefault('key', ''); 

我可以默認一個會議這樣用一個'價值，它似乎並不介意，有兩個這樣的設置，事情就變得不合時宜了。接下來的改變是在第一個表格的正下方添加另一個Spacebars {{#each}}。

{{#each Query}} 
    <tr> 
    <td>{{Fname}}</td> 
    <td>{{Lname}}</td> 
    <td>{{CampYear}}</td> 
    </tr> 
{{/each}} 
{{#each Query2}} 
    <tr> 
     <td>{{Fname}}</td> 
     <td>{{Lname}}</td> 
     <td>{{CampYear}}</td> 
    </tr> 
{{/each}} 

每個助手現在需要鏈接到適當的{{#each}}。第三部分是我被迫將一個Session設置回未定義，另一個設置另一個以防止將表重疊在一起。

Template.query.events({ 
    'click #donate-button': function() { 
    var donateTemp = parseInt(document.getElementById('donate').value, 10); 
    Session.set('keyCampYear', undefined); 
    Session.set('keyDonate', donateTemp); 
    } 
}); 

Template.query.events({ 
    'click #camp-year-button': function() { 
    var campYearTemp = document.getElementById('camp-year').value; 
    Session.set('keyDonate', undefined); 
    Session.set('keyCampYear', campYearTemp); 
    } 
});