在渲染时访问模板内的数据

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

这是我在使用马里奥之前的 hacky 解决方案。所以我需要等待2个条件：

1. 模板已渲染
2. 数据已准备就绪

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

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

Answer 2

这可能发生的原因是rendered 函数内提供的数据 (this.data) 上下文是非响应式。

在 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
     }
 }

使用它需要您自担风险。

在 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 3

看来您正在使用autopublish，并且订阅尚未准备好。

见my answer on waiting for subscriptions to load。