Skip to content Skip to sidebar Skip to footer

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()

Solution 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 () {
  vardata = Router.current() && Router.current().data();
  if(data)
    drawChart(".chart-container", data);
  // else do nothing until the next deps change
}

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

Post a Comment for "Properly Loading Template.templatename.rendered Data Context"