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

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

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

---

我这样做对吗？如果是的话，我怎样才能做到呢？谢谢

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

您的方法很好。 这里的关键是观察集合，并在集合中的项目处于以下状态时更新画布：

附录文件或附录文件，atIndex，在 removedoldDocument或removedAtoldDocument，atIndex 更改新文档、旧文档或更改数据新文档、旧文档、索引 将文档从索引移动到索引，在 还有一种更有效的方法。 类似于下面的代码应该可以帮助您：

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      }
    });
  };
}

---

示例：

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

1设置正在处理的模板的数据上下文，将包含该特定模板所需数据源的对象打包，以及

2强制模板在检索数据之前不呈现。一旦检索到数据，iron router将加载模板，您现在可以完全使用javascript控制上面创建的数据对象

高级别的步骤：

1安装铁制路由器

2为模板定义路线

3使用waitOn方法告诉iron router您正在订阅哪个数据源，它正在等待哪个数据源

4定义加载模板（也称为启动屏幕），在加载模板之前检索数据时显示。根据，您可以通过在iron router.js文件中插入这段代码来实现这一点：

只需确保创建一个加载模板即可

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

具体步骤如下：

---

您能否提供一些代码示例以配合您的解释？我还在学习Meteor，所以我很难理解你的回答。谢谢嘿，库巴-这似乎可以很好地监控整个文档。但是如何处理文档中的更改呢？我正在尝试监视对现有文档的更改文档计数是固定的-有什么建议吗？我想在客户端存储添加/删除的值，以便对其执行计算。请参阅。还有一些处理程序，如：changed、movedTo。也来看看

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

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
}

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      }
    });
  };
}

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