Render callback to all templates in meteor blaze

Question

I am forced to assign rendered callbacks to all my templates.

Until 0.9.0 I used to do it like this:

_.each( Template, function( template, name ) {
  //...
  template.rendered = function() {
    //...
  };
});

But now, Template is a constructor and not an object, so this method won't work here. Is there any way to pass callback function to all templates or fire function when all templates were rendered using Blaze?

Skyler

Answer 1

Here is a quick workaround I came up with, iterating over every Template property to find out if it corresponds to a template definition, and if it does, assign the onRendered callback.

// make sure this code is executed after all your templates have been defined
Meteor.startup(function(){
  for(var property in Template){
    // check if the property is actually a blaze template
    if(Blaze.isTemplate(Template[property])){
      var template=Template[property];
      // assign the template an onRendered callback who simply prints the view name
      template.onRendered(function(){
        console.log(this.view.name);
      });
    }
  }
});

I don't know what's your use case so there may be better solutions depending on it.

Milka

It is actually what I need, but any idea where to put this code so that it loads after all templates have been defined? And instead of checking Template[property].viewName one can use Blaze.isTemplate function – Skyler

Thanks for the Blaze.isTemplate suggestion, I updated my code to use a client-side Meteor.startup to make sure it is executed after every templates have been defined. – Milka

Works perfect - thanks, but should be simpler (e.g. API method) imho. – Babbittry

Needed to get the $.material.init(); into all the Template's onRendered for fezvrasta:bootstrap-material-design plugin. This worked like a champ! Thanks, and +1. – Creature

Answer 2

With Meteor 1.2.1 the Template object has an onRendered(hook) function to accomplish an 'all template' onRendered behaviour.

Template.onRendered(function(){
  var template = this;
  Deps.afterFlush(function() {
    console.log("triggering Jquery mobile component creation for "+template.view.name);
    $(template.firstNode.parentElement).trigger("create");
  });
});

The postponed update via Deps.afterFlush(callback) is optional and subject to your application needs.

Overturn

I am on meteor 1.2.1 but this solution does not work: TypeError: Template.onRendered is not a function – Altricial

Not sure why this didn't work for you and apparently others that down-voted the answer, but this feature is working as expected for me in several production applications. Check out the source code and if possible confirm your Template object is actually a Meteor Blaze Template object and not replaced/mutated... – Overturn

Just checked on Meteor 1.4 and Template.onRendered is undefined. – Insatiate