MeteorJS : 模板渲染 & Meteor 方法调用答案

【问题标题】：MeteorJS : Template rendered & Meteor method callMeteorJS : 模板渲染 & Meteor 方法调用
【发布时间】：2015-07-12 13:14:51
【问题描述】：

这个问题在我之前的问题之后：Meteor: How to publish custom JSON data

我创建了一个 Meteor 方法来构建一个复杂的 JSON（使用不同的集合等构建）。有了这些数据，我需要使用 D3.js 构建一个图表。

我曾经在 Session 中设置数据，但是当我意识到每次到达页面时都需要刷新它们时，它无法正常工作。

显然，我在机制中有些东西我不明白，但这是我的代码：

Template.myPage.rendered = function(){

    var data = Meteor.call('myData');

    var svgContainer = d3.select("#svg");

    var margin = 40;
    var width = parseInt(d3.select("#svg").style('width'),10);
    var height = parseInt(d3.select("#svg").style('height'),10);
    // ... some more D3 code where I need the data

我得到的错误是：

"Exception from Tracker afterFlush function: data is undefined

我已经尝试在Template之外调用Meteor Method，并将结果放到Session中（在回调函数中），但是没有成功。我也尝试过使用响应式 var，但我做不到。

非常感谢。

【问题讨论】：

标签： javascript d3.js meteor iron-router

【解决方案1】：

好吧，当您尝试使用没有值的变量时，您会收到 "undefined" 错误。

console.log(data) //return undefined

根据你所说的，Meteor.method 返回一个依赖于其他集合的JSON。

所以我认为您在这里的最佳选择是在myPage 模板上使用waitOn。

waitOn:function(){
 //return all the collection that the JSON depends
}

您可以尝试使用会话，也可以使用 Tracker。

var data = Meteor.call('myData');
Session.set('data',data)

//and later

     Template.myPage.rendered = functiopn(){
       Tracker.autorun(function(){
         var data = Session.get('data')
          if(data === undefined){
           //this is the long way
           console.log("Wait the data value still undefined")
          }else{
           //load all the D3 stuff
           console.log(data)
          }
       });
     }

【讨论】：

您好，谢谢。我不能等待所有的集合，因为我需要的条目太多 - 太多了，无法在客户端发送。
使用Session 和tracker，在数据为!== undefined 时触发D3 代码
另外，Meteor.call('myData') 并在 Session 中设置的问题是，当我离开页面并返回时它不会更新:(
嗯，如果你在 TrackerAutorun 中使用 Meteor.call('myData') 和一个简单的 if statemt 会发生什么情况@ 检查数据何时是 !== undefined
它不会更新。如果我的 D3 图表上有 8 个项目，然后离开页面，那么我应该在图表上有 9 个项目。当我再次进入图表页面时，我仍然有 8 个项目......除非我重新启动应用程序:(

【解决方案2】：

我会这样尝试：

Template.myPage.rendered = function(){
    Meteor.call('myData', function(error,data){
       // if !error, data should be good
       var svgContainer = d3.select("#svg");

       var margin = 40;
       var width = parseInt(d3.select("#svg").style('width'),10);
       var height = parseInt(d3.select("#svg").style('height'),10);
    });
};

【讨论】：

【解决方案3】：

感谢 twitter 和 @callmephilip 我找到了答案（我很惭愧我自己找不到它！:D）

唯一要做的就是将所有d3代码放入方法回调：

Template.myPage.rendered = function(){
    Meteor.call('myData', function(err, result){
        if(err){
           console.log(err);
        }else{
             // all the D3.js code 
        }
    });
};

祝你有美好的一天；）

【讨论】：

【解决方案4】：

你可以使用“meteor-reactive-method”。这是https://github.com/stubailo/meteor-reactive-method的内联链接

然后在客户端

 Template.myPage.rendered = functiopn(){
   Tracker.autorun(function(){
     var data = ReactiveMethod.call('myData');
      if(data === undefined){
       //this is the long way
       console.log("Wait the data value still undefined")
      }else{
       //load all the D3 stuff
       console.log(data)
      }
   });
 }

在服务器中

 Meteor.methods({
  myData: function() {
    return CollectionName.find().fetch()
 }
})

【讨论】：