Properly loading Template.templateName.rendered data context

问题

I have a template, chartEditPreview, that runs a D3.js chart-drawing function once the rendered callback fires. It looks like this:

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

Where .chart-container is the target div and this.data is the data for the object in the DB currently being accessed. Problem is, this.data often returns null, seemingly at random. It looks like this has something to do with how the publish/subscribe pattern works — Iron Router (which I'm using) lets the templates render and then hot-pushes the data into those templates.

My question is (hopefully) pretty simple: how can I make sure this.data is actually full of DB data before drawChart is run? Should I be doing this in some other way, instead of calling it on the rendered callback?

I'm thinking of storing the DB data in a Session variable during the routing and calling that from rendered, but it seems like an extra step, and I'm not certain it'll fix this problem. The chart's also not rendered only once on the page — it's interactive, so it needs to be redrawn every time the database object is updated via one of the inputs on screen.

Any help would be much appreciated. Thanks!

For reference, here's what my routes.js looks like:

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

And my publications.js:

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

回答1:

This is a common problem with Meteor. While the subscription might be ready (you should check for it like Ethaan shows) , that does not mean the find() function actually had time to return something.

Usually I solve it with some defensive code, i.e:

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

Of course this is not as clean as it should be, but as far as I know the only way to solve problems like this properly.

Updated answer In this case we need a dependency to trigger rerun on data change. Iron router solves this for us:

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
}

回答2:

add this.ready() into the data:function

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

Something using data and waitOn could be a little bit tricky

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

来源：https://stackoverflow.com/questions/28572659/properly-loading-template-templatename-rendered-data-context

标签

javascript

d3.js

meteor