In Meteor how to 'chain' Template.x.onRendered() calls?

1

I found the onRendered() API call here:

http://docs.meteor.com/#/full/template_onRendered

I want to call-back after both t1 and t2 have rendered.

So far I have written this code and it fails silently:

<body>
  {{> t1}}
  {{> t2}}      
</body>

<template name="t1">
  <span id='s1'>span1</span>
</template>

<template name="t2">
  <span id='s2'>span2</span>
</template>

if (Meteor.isClient) {
  Template.t1.onRendered(function () {
    Template.t2.onRendered(function () {
      var myspan1 = $('span#s1');
      var myhtm1  = myspan1.html();
      var myspan2 = $('span#s2');
      var myhtm2  = myspan2.html()
      myspan1.html(myhtm2);});});
}

My JS skills are very poor so this might be more of a JS question than a Meteor question.

Question: How to call-back after both t1 and t2 have rendered?

2

You should make a parent template to put into the body that contains both {{>t1}} and {{>t2}} and then wait for that template to render.

Basically make sure that the parent template is rendered and it will make sure that all subtemplates are also rendered.

3

If you add t1 and t2 inside another template like wrapper then add your code to Template.wrapper.onRendered(function(){ //your code here}) .

4

You can use a combination of the session and the body template.

if (Meteor.isClient) {
    Template.body.onRendered(function () {
      Tracker.autorun(function() {
        if (Session.equals('t1',true) && Session.equals('t2',true)) {
          var myspan1 = $('span#s1');
          var myhtm1  = myspan1.html();
          var myspan2 = $('span#s2');
          var myhtm2  = myspan2.html()
          myspan1.html(myhtm2);
        }
      });
    });
    Template.t1.onRendered(function () {
      Session.set(t1, true);
    });
    Template.t1.onDestroyed(function () {
      Session.set(t1, false);
    });
    Template.t2.onRendered(function () {
      Session.set(t2, true);
    });
    Template.t2.onDestroyed(function () {
      Session.set(t2, false);
    });
}