从流星发布/订阅事件创建 javascript 数据结构？答案

【问题标题】：create javascript data structure from meteor pub/sub events?从流星发布/订阅事件创建 javascript 数据结构？
【发布时间】：2015-02-19 19:57:12
【问题描述】：

我有一个非常简单的流星应用程序，目前只显示来自后端 mongo 商店的更新。

<head>
  <title>dc-meteor</title>
</head>

<body>

  <div name="heatmap">
    <canvas id="heatmap" width="1000px" height="1000px"></canvas>
  </div>
  <script>

  var data = [
    [ 350,280, 32 ],
    [ 120,120, 28 ],
    [ 230,330, 35 ],
    [ 440,240, 12 ],
    [ 640,540, 60 ],
    [ 650,670, 70 ],
    [ 680,500, 30 ],
    [ 690,340, 43 ],
    [ 500,440, 38 ],
    [ 550,240, 43 ],
    [ 350,640, 49 ],
    [ 580,540, 47 ]
  ];
  var plan = new Image();
  plan.src = "images/floor2.svg";
  plan.onload = function(){
    var canvas = $('#heatmap');
    var ctx = canvas[0].getContext('2d');
    ctx.drawImage( plan,0,0, 1000, 1000 * plan.height / plan.width );
  };
  var heat = simpleheat('heatmap').data(data).max(20).radius( 10,40 );

  heat.draw(0.8);
  </script>

  {{> sensor_list}}

</body>

<template name="sensor_list">
  <div class="sensor_list">
    {{#each sensors}}
        {{> sensor_item}}
    {{/each}}
  </div>
</template>

<template name="sensor_item">
  <div class="sensor_item">
    <p>{{_id}}: time={{ts}} {{temp}}C {{humidity}}%</p>
  </div>
</template>

如您所见，我有流星实时更新数据到 sensor_list 模板，但是，我还想构建 data 变量来包含实时数据。

我如何做到这一点？

【问题讨论】：

标签： templates meteor

【解决方案1】：

您可以使用Tracker.autorun 来更新热图。在 javascript 文件中（不在 <script> 标签中）：

Template.body.rendered = function () {
    var heatmap = simpleheat("heatmap");
    this.autorun(function () {
        var data = calculateTheDataSomehow();
        heatmap.data(data).draw(0.8);
    });
}

如果您的calculateTheDataSomehow() 访问响应式数据源（如集合），那么只要数据发生变化，autorun 函数就会重新运行，从而更新热图。

代码放在Template.body.rendered，所以它只在正文模板初始渲染时运行。

这里我使用了this.autorun，它是Tracker.autorun 的一个特殊版本，当模板被删除时它会自动停止自动更新。在这种情况下，模板是Template.body，它永远不会被删除，但无论如何这是一个好习惯。

【讨论】：

感谢您的深入描述；我还发现observe 对我有用；在集合上使用autorun over observe 的优缺点是什么？
observe 只为您提供更改，而autorun 在每次更改时为您提供整个查询。因此，如果您能够有效地合并更改，observe 应该会更有效率。