javascript - 正确加载 Template.templateName.rendered 数据上下文

Question

我有一个模板 chartEditPreview，一旦渲染的回调触发，它就会运行 D3.js 图表绘制函数。它看起来像这样:

Template.chartEditPreview.rendered = function() {
  drawChart(".chart-container", this.data);    
}

其中 .chart-container 是目标 div，this.data 是当前正在访问的数据库中对象的数据。问题是，this.data 经常返回 null，看起来是随机的。看起来这与发布/订阅模式的工作方式有关 - Iron Router(我正在使用)让模板渲染，然后将数据热推到这些模板中。

我的问题(希望)非常简单:在运行 drawChart 之前，如何确保 this.data 实际上充满了数据库数据？我应该以其他方式执行此操作，而不是在渲染的回调上调用它吗？

我正在考虑在路由期间将数据库数据存储在 Session 变量中并从渲染中调用它，但这似乎是一个额外的步骤，而且我不确定它是否会修复这个问题。图表也不仅仅在页面上呈现一次 - 它是交互式的，因此每次通过屏幕上的输入之一更新数据库对象时都需要重新绘制图表。

任何帮助将不胜感激。谢谢!

<小时/>

作为引用，我的routes.js 如下所示:

Router.route('/chart/edit/:_id', {
  name: 'chart.edit',
  layoutTemplate: 'applicationLayout',
  yieldRegions: {
    'chartEditType': { to: 'type' },
    'chartEditPreview': { to: 'preview' },
    'chartEditOutput': { to: 'output' },
    'chartEditAside': { to: 'aside' },
    'chartEditEmbed': { to: 'embed' }
  },
  data: function () {
    return Charts.findOne({_id: this.params._id});
  },
  waitOn: function () {
    return Meteor.subscribe('chart', this.params._id);
  }
});

还有我的 Publications.js:

Meteor.publish("chart", function (id) {
  return Charts.find({ _id: id });
});

Answer 1

这是 Meteor 的常见问题。虽然订阅可能已准备就绪(您应该像 Ethaan 所示那样检查它)，但这并不意味着 find() 函数实际上有时间返回某些内容。

通常我用一些防御性代码来解决它，即:

Template.chartEditPreview.rendered = function () {
  if(this.data)
    drawChart(".chart-container", this.data);
  // else do nothing until the next deps change
}

当然，这并不像应有的那么干净，但据我所知，这是正确解决此类问题的唯一方法。

更新答案在这种情况下，我们需要一个依赖项来在数据更改时触发重新运行。 Iron router 为我们解决了这个问题:

Template.chartEditPreview.rendered = function () {
  var data = Router.current() && Router.current().data();
  if(data)
    drawChart(".chart-container", data);
  // else do nothing until the next deps change
}