流星在等待数据渲染Blaze模板之前

我在仪表板上有多个图表，显示计数，分组等等。后端数据有超过100万行。我决定不使用订阅。我不需要对图表进行反应式更新。流星在等待数据渲染Blaze模板之前

我的服务器方法正在使用rawCollection，运行聚合来获取结果，我通过会话变量将数据分配给我的图表对象，这些变量是我在客户端回调中设置的。

服务器方法：

function purchasedItemDollarsByCategory() { 
    Future = Npm.require('fibers/future'); 
    var iCat = new Future(); 
    Purchasing.rawCollection().aggregate([ 
      { 
       $project: { 
        "GLCodeName": 1, 
        "Amount" : 1 
       } 
      }, 
      { 
       $group : { 
        _id: "$GLCodeName", 
        amount: { $sum : "$Amount" } 
       } 
      }, 
      { 
       $sort : 
        {_id : 1} 
      } 
     ], 
     function(err,docs) { 
      if (err) { 
       iCat.throw(err); 
      } else { 
       iCat.return(docs); 
      } 
     } 
    ); 
    return iCat.wait(); 
}

在模板中，我打电话

function getPurchasedItemDollarsByCategory() { 
    Meteor.call('purchasedItemDollarsByCategory', function (err, results) { 
     if (err) { 
      toastr.error('Something went wrong. Could not retrieve purchased Item count'); 
      return false; 
     } else { 
      Session.set('purchasedItemDollarsByCategory', results); 
     } 
    }) 
}

现在，我使用的其他功能形状的图表中的数据：

function getPurchasedItemCountByCategoryChartData() { 
    var allItemsPurchasedByCategory = Session.get('purchasedItemCountByCategory'); 
    var allGlCodes = []; 
    var allItemPurchasedCountDataPoints = []; 
    var contractedPurchasedCountDataPoints = []; 
    _.forEach(allItemsPurchasedByCategory, function(d) { 
     allGlCodes.push(d._id); 
     allItemPurchasedCountDataPoints.push(d.items); 
    }); 
    Session.set('allGlCodes', allGlCodes); 
    Session.set('allItemPurchasedCountDataPoints', allItemPurchasedCountDataPoints); 
}

现在我将“allGlCodes”和“allItemPurchasedCountDataPoints”分配给模板onRendered中的highcharts配置对象事件。

服务器方法工作正常。客户也正在获取数据。但是在数据回来之前渲染正在发生。所以图表呈现为空。但是如果我点击应用程序并回到此页面，我会看到数据。我不确定是否我明确知道发生了什么，但我猜测数据最终会回来并填充会话变量，并且由于会话粘滞，我会在延迟后看到数据。

我想不渲染，直到数据回来。所以我在Template onCreated中创建了一个ReactiveVar。

this.isLoadingA = new ReactiveVar(false); 
this.isLoadingB = new ReactiveVar(false); 
this.isLoading = new ReactiveVar (this.isLoadingA && this.isLoadingB);

现在的问题是我应该在哪里设置为false。我有多个服务器调用正在进行。我可以为每个调用加载一个isLoading并创建一个allDataReady变量。但是，如果我尝试在我的成功回调设置为服务器的方法：

Template.instance().isLoadingA.set(true);

我得到以下错误：

TypeError: Cannot read property 'isLoadingA' of null

我希望我解释清楚这个问题，我的尝试。有什么想法吗？

来源

2016-01-24 SudiB

我相信Template.instance（）在Meteor方法自身的回调中不可用。你可以这样做：

exampleHelper() { 
    var template = Template.instance(); 
    Meteor.call('example', function(error, results) { 
     console.log(Template.instance()); // Undefined 
     console.log(template); // What you want in order to set your reactive variables. 
    }); 
}

这将允许你使用反应变量并在回调中适当地设置状态。

来源

2016-01-24 18:32:04

我正在从onCreated进行初始化调用。通过传递'this'来将模板的引用传递给方法。我现在可以适当地设置被动变量。但即使数据检索时状态发生变化，图表也不会呈现。我是否必须触发重绘图表？ – SudiB

流星在等待数据渲染Blaze模板之前

回答

相关问题