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

Question

如何先执行对集合的查询，然后在呈现特定 div 后执行另一个函数？

如果我执行以下操作，我会从 .highcharts() 收到错误消息，指出无法找到 div #chart。

ma​​in.html

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

ma​​in.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()，如下所示，我会收到一条错误消息未找到变量 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 检索到 data 后，如何运行 highcharts 函数？

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:使用自定义发布

优点:响应式，计算在服务器上运行

缺点:不容易或直接

示例:检查房间数 example在 meteor 文档中