Meteor Rendering Template Dynamically

Question

I have a webapp that consists of several pages and a main page. When developing this webapp in Meteor, I segregated the pages into templates. The webapp shall display different pages for a period of time, meaning that Page A shall be for 60 seconds, then proceed with Page B for maybe 75 seconds and so on.

In meteor I construct a main page that consists of header and footer and a changeable templateholder. So basically the main page looks like this:

<template name='main'>
   {{>header}}
   {{>templateHolder}}
   {{>footer}}
</template>

and the Pages are translated into templates, ie templateA etc. These templates shall replace the templateHolder based on an update on Session object, which also based on some timing (in seconds) that will be executed by using setTimeout JS function.

Everything works, however I noticed that the timing of each Page goes haywire. When I tested the template individually, they work fine. I suspect that the asynch call of setTimeout somehow conflicting each other.

Here is the JS code that changes the template periodically.

Template.main.templateHolder = function(){
  var appIndex = Session.get('currentAppIndex');
  switch(appIndex){
     case 'A':
        return Template['templateA'];
  } //....and so on... with other templates
}

Template.main.created = function() {
  //Query each pages display time and load it into sessions
  // etc...........

  Session.set('currentAppIndex',0); //Initialize the first page
  setTimeout(nextPage,0);
}

function nextPage() {
  //Bunch of line of codes that retrieve time param from settings and calculate
  //Also some simple alogrithm to get next templates.. etc
  //Update the session index object so that it reactively updates the templateHolder

  setTimeout(nextPage,currPageDisplayTime); //currPageDisplayTime is the pages time of display in milliseconds.
}

I am not sure if my way is correct but it managed to display the templates and change them. The only concerns is the timing does not work properly. What is the best way to change template dynamically? Is this prone to any bug in the future?

Answer 1

I have found the reason of this buggy behavior. How do I troubleshoot them?

1. I put JS alert whenever timeout occurs in templates.
2. Also, alert whenever a session object is updated.

The flow of the templates rendering should be like this template A (60 secs) --> template B (75secs)--> template A (which is a looping). I noticed that during displaying template B , the alert that I put in template A fires! That means that eventhough only one template is being shown at a time, the created template continues to live healthy behind the scene. It still continues the process whatever it is designated to do.

This made me realize that if both of the templates exist at the same time, I cannot use the same session objects as they will both updating the same things. Turned out that I standardized the use of the session objects across the templates; for example i use Session.set('itemIndex',index) to iterate through the collection in each template, but since the templates are accidentally using the same object, they both update the data at the same time.

So the JS setTimeout works as intended. The problem is the shared session objects.

TL;DR templates don't get destroyed when it is not displayed/changed. This can be avoided by destroying it manually or using different objects.

P/S: Still looking on how to destroy template after created.