多个事件映射和多个文本输入的帮助程序

时间:2015-12-27 03:28:08

标签: javascript meteor

我已经通过Session获得了这个帮助器和事件映射。事件正在侦听按钮单击,然后从输入字段中获取输入文本。然后它设置会话。帮助程序获取Session并对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);
  }
});

使用空格键{{#each}}设置输出以显示表格:

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

这可以按预期工作。我现在需要添加另一个文本字段和按钮来查询数据库中的其他字段,并输出到相同的空格键{{#each}}。但是我无法让它发挥作用。添加另一个事件映射,Session和帮助似乎不起作用。有没有办法可以通过其按钮获取另一个输入字段,以便在相同的空格键{{#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集合在浏览器中加载,而无需用户单击任一按钮。第一个按钮和文本框无法操作,新创建的按钮和文本框工作,但非常缓慢。

1 个答案:

答案 0 :(得分:0)

看起来我找到了解决方案。我不熟悉Meteor足以知道这是解决方案,但这就是我的所作所为。首先,为了防止在页面上加载整个集合,必须将两个Sessions都设置为undefined默认值:

Session.setDefault('key', undefined);

而不是:

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

我可以默认使用&#39;&#39;这样的会话。它看起来并没有什么价值,有两套这样的东西,事情变得混乱了。下一个更改是在第一个下面的表格中添加另一个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设置回undefined,同时设置另一个以防止将表堆叠在一起。

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);
  }
});