title: Dynamically showing templates in Meteor without re-rendering/re-creating template
body: <p>Long time user of SO but first time poster.</p>
  
  <p>I have a Meteor web application where a user is presented with a page with a single input. Once they action it, the following section appears below. This process repeats.</p>
  
  <p><strong>Journey.html</strong></p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;Page Journey&lt;/title&gt;    
  
    &lt;script type="text/javascript"&gt;
      function showValue(newValue)
      {
          document.getElementById("range").innerHTML=newValue;
      }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    {{&gt; Page0}}
  
    {{&gt; Page1}}
  
    {{&gt; Page2}}
  
    {{&gt; Page3}}
  &lt;/body&gt;
  
  &lt;template name="Page0"&gt;
    &lt;h1&gt;This is Page 0!&lt;/h1&gt;  
    &lt;p&gt;Welcome to Journey App.&lt;/p&gt;
    &lt;input type="range" min="1" max="10" value="1" step="1" onchange="showValue(this.value)" /&gt;
      &lt;span id="range"&gt;1&lt;/span&gt;
  &lt;/template&gt;
  
  &lt;template name="Page1"&gt;
      {{#if showpage1}}
    &lt;h1&gt;This is Page 1!&lt;/h1&gt;  
    &lt;p&gt;{{page1copy}}&lt;/p&gt;
    &lt;input type="button" value="Show Page 2" /&gt;
    {{/if}}
  &lt;/template&gt;
  
  &lt;template name="Page2"&gt;
      {{#if showpage2}}
    &lt;h1&gt;This is Page 2!&lt;/h1&gt;
    &lt;p&gt;{{page2copy}}&lt;/p&gt;
    &lt;input type="button" value="Show Page 3" /&gt;
    {{/if}}
  &lt;/template&gt;
  
  &lt;template name="Page3"&gt;
      {{#if showpage3}}
    &lt;h1&gt;This is Page 3!&lt;/h1&gt;
    &lt;p&gt;{{page3copy}}&lt;/p&gt;
    {{/if}}
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Journey.js</strong></p>
  
  <pre><code>//On initialization, set position to 0.
  if (Meteor.isClient) {
    Meteor.startup(function () {
      Session.set("position",0);
    });
  }
  
  if (Meteor.isClient) {
  
    Template.Page0.events({
      'click input': function () {
        var value = getValue();
        if (value&gt;5)         {        Session.set("position",1);        }
        else                 {        Session.set("position",0);        }
      }
    });
  
      Template.Page1.events({
      'click input': function () {      
        //Increment position
        Session.set("position",2);
      }
    });
  
      Template.Page2.events({
      'click input': function () {      
        //Increment position
        Session.set("position",3);
      }
    });
  }
  
  if (Meteor.isClient) {
    Template.Page1.showpage1 = function () {
      return Session.get("position") &gt; 0;
    }
  
    Template.Page2.showpage2 = function () {
      return Session.get("position") &gt; 1;
    }
  
    Template.Page3.showpage3 = function () {
      return Session.get("position") &gt; 2;
    }
  }
  
  if (Meteor.isClient) {
    Template.Page1.rendered = function(){
      console.log ('Page 1 rendered');
    };
  
    Template.Page2.rendered = function(){
      console.log ('Page 2 rendered');
    };
  
    Template.Page3.rendered = function(){
      console.log ('Page 3 rendered');
    };
  }
  
  function getValue()
  {
    var value = parseInt(document.getElementById("range").innerHTML);
    return value;
  }
  </code></pre>
  
  <p>Am I going about this all wrong?</p>
  
  <p>I want to fire off a function (google analytics tracking code, for example) every time that a new page loads. The <code>.rendered()</code> function gets fired when the page loads up the first time around, so this isn't ideal.</p>