Question

我正在尝试在Meteor中制作一个饼图，但我无法获取模板来查看数据。这是我的代码：

PieData = new Mongo.Collection("piedata")

if (Meteor.isClient) {
  Meteor.subscribe('piedata');

  console.log(PieData.find({}).fetch());

  Template.piechart.rendered = function () {
    $('#pie').epoch({
      type: 'pie',
      data: ### Data here (a list) ###
  });
  }
}

if (Meteor.isServer) {
  Meteor.publish('piedata', function() {
    return PieData.find({});
  });
}

我尝试了PieData.find({})甚至PieData.find({}).fetch()，但它只返回一个空列表（与console.log调用相同）。如果我在开发工具控制台中运行PieData.find({}).fetch()，则会正确返回数据。

Answer 1

这可能是一种愚蠢的原因是rendered函数中提供的数据（this.data）上下文不被反应。

On Meteor 0.8.3（可能还有一些其他版本）有一种非正式的方式来获取数据，你必须深入了解Meteor的源代码才能找到它。

 Template.piechart.rendered = function () {
     this.autorun(function () {

         //This is going to set a dependency
         var myData = Blaze.getCurrentData();
         //your code goes below
     }
 }

使用它需要您自担风险。

On Meteor 1.0（据我所知），这是官方记录的方式。您使用Template.currentData() https://docs.meteor.com/#/full/template_currentdata

我个人使用rendered功能来创建图表等等。它只是你创建一次的东西，但你必须非常小心。< /强>

让我们说你在你的应用程序中左边有一个列表和一个主内容区域。在列表中，您可以选择不同的数据集，单击时，主要内容区域将加载您的图表。很酷，它正在工作！但是等等......

如果单击左侧列表中的更多项目，您会注意到页面变慢。如果您每次更改数据内容时都创建了图表，那么您的应用程序将受到影响，并且UI会被冻结几秒钟。根据我的个人经验，我有一个简单的日期时间选择器这个问题。 当数据上下文发生变化时，依赖函数将多次运行时非常常见。

解决方案：

 Template.piechart.rendered = function () {
     this.autorun(function (computation) {

         //This is going to set a dependency
         var myData = Template.currentData()

         if (computation.firstRun) {
             //create your pie chart, etc.
         }
         else{
            //update the element(s) data that you create on first run
         }

     }
 }

Answer 2

看起来你正在使用autopublish，订阅还没有准备就绪。

请参阅my answer on waiting for subscriptions to load。

Answer 3

这是我使用Mario之前的hacky解决方案。所以我需要等待两个条件：

呈现模板
数据准备就绪

所以我为此使用了两个变量：

Meteor.subscribe('piedataLoaded', function onReady() {
  Session.set('dataLoaded', true);
});

Template.piechart.rendered = function () {
  Session.set('piechartRendered', true);
}

最后：

Meteor.autorun( function(computation) {
    if( Session.get('piechartRendered') && Session.get('piedataLoaded')) {
        $('#pie').epoch({
          type: 'pie',
          data: PieData.find({}).fetch()
        });
        computation.stop(); //Stop autorun
    }
});

在呈现时访问模板内的数据

3 个答案: