Question

如何首先执行对集合的查询，然后在呈现特定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);
};

现在，如果我通过highcharts()呈现模板dom之后调用函数Template.chart.rendered，如下所示，我收到一条错误，指出找不到变量data。

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之后运行data函数？

Answer 1

你的第一个例子不起作用，因为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：使用自定义出版物

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

缺点：不容易或直截了当

示例：检查Meteor文档中的逐个房间example

如何检索Meteor.js Collection然后在DOM加载后将其传递给函数

1 个答案: