Question

我正在构建基于流星的webapp。其中一个页面有一个下拉菜单，用户必须从中选择选项（各个学区）。需要检测选择，然后根据选择查询数据库过滤文档并计算返回的文档，然后渲染模板（使用highcharts.js构建的图表）

代码如下：

Template.districtDropdown.events({
  'change' : function(event, template){
    event.preventDefault();
    var selectedValue = template.$("#selectDistrict").val();
    console.log("You Selected " + selectedValue);
    var filter = {
      find: {
        'School District' : selectedValue
      }
    };
    Meteor.subscribe('aggByDistrict', filter);
    productNames2 = _.uniq(CombinedData.find().map( function(doc) { return doc.Product; }));
    console.log(productNames2);
    var productValues2 = [];
    for(var i = 0; i < productNames2.length; i++) {
      productValues2.push(CombinedData.find({'Product' : productNames2[i]}).count())
    };
      console.log(productValues2);
  }
});

我面临三个问题。

客户端的控制台抛出错误＆＃34; productNames2＆＃34;页面加载时没有定义，指向具有for循环的行（甚至在我做出任何选择之前）。
我第一次点击下拉菜单中的一个选项时，我得到空数组（两个console.log（productNames2）和console.log（productValues2），但当我点击其他选项时，它第二次工作。不知道为什么。
我想渲染一个模板{{＆gt; highchart2}}用户从下拉列表中选择了一个选项后，填充了两个数组（productNames2，productValues2）。

任何人都可以就如何解决这些问题向我提出想法吗？

Answer 1

您的代码有几个问题

Subscribe需要放入Template.districtDropdown.created。如果您在活动期间订阅，则订阅期间可能会推迟，并且活动期间没有可用数据
事件应附加到DOM组件。与change #selectDistrict中一样，然后选择像var selectedValue = $(event.target).val();

从下拉列表中选择后执行代码

1 个答案: