如何在集合上执行查询,然后在呈现特定div后执行另一个功能？

如果要执行以下操作,则会从.highcharts()中收到错误消息,指出它无法找到div #chart.

main.html

<template name="chart">
    <div id="chart">{{init}}</div>
</template>

main.js

Template.chart.init = function() {
    // Get results of query first
    var data = myCollection.find();

    data.forEach(function(row) {
        console.log(data.price); // yes we received the collection
    });

    // Then pass to function
    $('#chart').highcharts(data);
};

现在,如果在如下所示通过Template.chart.rendered渲染了模板dom之后调用函数highcharts(),则会收到一条错误消息,指出未找到变量数据.

Template.chart.init = function() {
    var data = myCollection.find();

    data.forEach(function(row) {
        console.log(data.price);
    });
};


Template.chart.rendered = function() {
    $('#chart').highcharts(data)
}

在这里,似乎Template.chart.rendered在Template.chart.init之前运行.从mongo检索数据后,如何运行highcharts函数？

解决方法:

您的第一个示例不起作用,因为Meteor在确定要渲染的内容时调用了您的辅助函数.那时,您的图表模板在DOM中尚不存在.

由于范围问题,您的第二个示例不起作用.您正在尝试在渲染处理程序中使用仅在init中存在的变量.

这应该工作：

Template.chart.rendered = function() {
  $('#chart').highcharts(myCollection.find());
};

如果您需要计算值,可以采用两种方法进行计算.

方法1：在客户端上更改集合

优点：易于开发

缺点：客户端浏览器必须执行计算,这取决于集合大小和计算,可能会很慢

例：

var dataWithCalculations = _.map(myCollection.find(), function(document) {
  document.someValue = document.someOtherValue * 2;
  return document;
});
$('#chart').highcharts(dataWithCalculations);

我不确定这种方法是否是被动的.如果不是,则应使用dependency轻松修复.

方法2：使用转换

优点：易于开发

缺点：无反应

例：

Forms = new Meteor.Collection("forms", {
 transform: function(document) {
   document.someValue = document.someOtherValue * 2;
   return document;
 }
});

方法3：使用自定义出版物

优点：反应式,计算在服务器上运行

缺点：不容易也不简单

示例：检查流星文档中的按房间计数example