Meteor：如何在客户端对 Mongo 数据执行计算

Question

在我的 Meteor 应用程序中，我已成功发布数据服务器端并订阅了该数据客户端。现在，我不想将原始数据直接推送到客户端屏幕，而是将其存储为 javascript 对象，对其执行一些计算（数字运算），并将结果呈现在客户端屏幕上（在 HTML5 画布元素中）。每次更新 Mongo 时，应该重新运行 javascript 代码（即重新设置 js 对象，从该对象再次执行计算，并将新结果呈现在画布上）。

我可以使用 Template.example.helpers 块获取 Mongo 数据，并在客户端中直接显示如下：

---

Meteor.subscribe('collection','query');

Template.example.helpers({
  sampleData: function(){
    return Collection.findOne({query:`query`});
  }
});

---

<template name="example">
  <div>
    {{sampleData.last}}
  </div>
  <canvas id="test-canvas"></canvas>
</template>

---

但我想做的是在推送到客户端屏幕之前抓住这些数据，在Template.example.rendered 块内：

Meteor.subscribe('collection','query');

Template.example.rendered = function(){
  // define HTML5 canvas and context variables
  var canvas = $("#test-canvas")[0];
  var context = canvas.getContext("2d");
  // store Mongo data as Javascript variable
  // loop over this variable and perform calculations
    // draw results to the canvas
}

我是否以正确的方式处理这个问题？如果是这样，我该如何实现？谢谢！

Answer 1

在单独的对象中存储数据和执行计算并从对象而不是直接从 mongo 渲染模板可能会更容易，您可以使用“Deps”轻松保持模板的反应性，它会让您代码更易于维护。

Answer 2

对于上面提出的问题，我能够找到自己的答案。我的模板在客户端检索数据之前加载，因此我在浏览器的 javascript 控制台中不断收到cannot read property <blank> of undefined，代码会中断。您需要使用iron-router 包才能

1) 设置您正在处理的模板的“数据上下文”（打包一个包含该特定模板所需的数据源的对象），并且

2) 强制模板在检索到数据之前不呈现。检索到数据后，iron-router 会加载模板，您现在可以完全控制您在上面创建的数据对象。

高层次的步骤：

1) 安装iron-router

2) 为模板定义路由

3）使用waitOn方法告诉iron-router你正在订阅哪个数据源（它正在等待哪个数据）

4) 定义一个“正在加载”的模板（又名闪屏），以便在模板加载之前检索数据时显示。根据https://github.com/EventedMind/iron-router/issues/554，您可以通过将此代码块插入到您的 Iron-router router.js 文件中来实现：

Router.onBeforeAction(function(pause) {
  if (!this.ready()) {
    this.render('loading'); // wait
    pause();                // ready
  }
});

只要确保您创建了一个 loading 模板来配合这个。

5) 使用data 方法为您的模板设置数据上下文（创建要在模板中使用的数据对象）

详细步骤：

http://www.manuel-schoebel.com/blog/iron-router-tutorial

Answer 3

你的方法很好。 这里的关键是 observe 集合并在集合中的项目为时更新画布：

• added(document) 或 addedAt(document, atIndex, before)
• removed(oldDocument) 或 removedAt(oldDocument, atIndex)
• changed(newDocument, oldDocument) 或 changedAt(newDocument, oldDocument, atIndex)
• movedTo(document, fromIndex, toIndex, before)

observe changes in collection 还有更高效的方法。 类似于下面的代码应该可以帮助您：

if (Meteor.isClient) {
  Template.example.rendered = function () {
   var canvas = $("#test-canvas")[0];
   var context = canvas.getContext("2d");
   Collection.find().observe({
      added: function (doc) {              // draw sth on canvas          },
      changed: function (doc) {            // draw sth on canvas          },
      movedTo: function (doc) {            // draw sth on canvas          },
      removed: function (doc) {            // remove sth from canvas      }
    });
  };
}

示例：https://github.com/Slava/d3-meteor-basic