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

Question

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

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

其中.chart-container是目标div，this.data是当前正在访问的数据库中对象的数据。问题是，this.data 经常 returns null，似乎是随机的。看起来这与 publish/subscribe 模式的工作方式有关 — 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

将this.ready()添加到data:function

 data: function () {
    if(this.ready()){
       return Charts.findOne({_id: this.params._id});
    }else{
       this.render('loading')
   }
  },

使用 data 和 waitOn 的东西可能有点棘手

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

Answer 2

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

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

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

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

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

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
}

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

Properly loading Template.templateName.rendered data context

javascript

d3.js

meteor