Question

我想将ViS JS时间线图表实现到我的meteor应用程序中，我已下载了vis JS和CSS并添加到lib文件夹中，我创建了我的模板

<template name="vChart">
  <div id="visualization"></div>
</template>

下面我正在订阅数据

    Template.vChart.onCreated(function(){
      var self = this;
      self.autorun(function(){
        var uMacAdd = FlowRouter.getParam('mc');
        self.subscribe('historyinfo', uMacAdd);
      });
    });

在Render上我调用showChart来渲染我的Chart，但问题是当我从collection中获取数据时，它返回null。

    Template.vChart.onRendered(function(){
      var historyDump= Collection.find({}).fetch();
      console.log("------------------------------------------------");
      console.log(historyDump); 
      showChart();
    });

现在我在图表中显示硬编码数据，但它应该是动态的，我想从我的Collection中获取这些数据。

   var showChart = function(){
    var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
      {id: 1, className: 'Red',content: 'X', start: new Date(Date.now() - 1000 * 60 * 60 * 24),
      end: new Date(Date.now() - 1000 * 60 * 60 * 23)},
      {id: 2, className: 'green', content: 'Y', start: new Date(Date.now() - 1000 * 60 * 60 * 20),
      end: new Date(Date.now() - 1000 * 60 * 60 * 19)}
    ]);

  // Configuration for the Timeline
    var options = {
      //timeAxis: {scale: 'hour'},
      zoomMax: 8.64e+7
    };

  // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
}

要解决这个问题，我尝试为Template vChart编写助手，并从onRender中调用它，但没有用。

Template.vChart.helpers({
    getHistory: function(){
      var historyDump= Collection.find({}).fetch();
      return historyDump;
    }
});

Template.vChart.onRendered(function(){
    var res = Template.vChart.__helpers['getHistory']();
    console.log(res);   
    showChart();
});

我如何实现这一目标？

注意：我的订阅和发布工作正常，我可以在命令行中看到数据。只有Collection.find({}).fetch()写在帮助器或渲染中才能正常工作。

Answer 1

尝试订阅回调，它的工作原理:)不需要OnRender，也不需要任何帮助。如果您有更好的解决方案，请发布。

Template.vChart.onCreated(function(){
    var self = this;
    self.autorun(function(){
        var uMacAdd = FlowRouter.getParam('uMac');
        self.subscribe('historyinfo', uMacAdd, {
           onReady: function() { showChart();  },
           onError: function() { console.log('Error'); }
        });
    });
});

Meteor：在流星应用程序中渲染Vis JS时间线图表

1 个答案: