Question

我有一个非常简单的流星应用程序，目前只显示来自后端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>

如您所见，我让meteor将数据更新为sensor_list模板，但是，我还希望构建data变量以包含实时数据。

我如何实现这一目标？

Answer 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，永远不会删除，但无论如何这都是一个好习惯。

从meteor pub / sub事件创建javascript数据结构？

1 个答案: