流星：渲染可見JS時間線圖表中的流星應用

我想要實現VIS JS時間圖到我的流星的應用程序，我已經下載了可見JS和CSS添加到lib文件夾，我創造了我的模板流星：渲染可見JS時間線圖表中的流星應用

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

在渲染我叫這使得我的圖表中showChart，但問題是，當我從收集獲取數據，則返回null。

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

現在我在圖表中顯示硬編碼的數據，但它應該是動態的，這些數據我想從我的收藏獲取它。

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

爲了解決這個問題，我嘗試寫模板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()不起作用。

來源

2016-02-20 Sharath Bangera

嘗試訂閱回調，它工作:)沒有需要的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'); } 
     }); 
    }); 
});

來源

2016-02-20 11:18:01

流星：渲染可見JS時間線圖表中的流星應用

回答

相關問題