Taking your Meteor to the Spa

B. Clay Shannon

Rate me:

5.00/5 (1 vote)

8 Sep 2015CPOL1 min read

5.7K

Replacing the main body's template using Template.dynamic in a Meteor Single-Page-App

Massaging your Main Body

So you want to swap out your main page's starting template with other templates? It's easy. First, to prepare your app for such, use Template.directive in your primary html file (perhaps named "main.html" and located in a "client" subfolder of your project) like so:

HTML

<body>
{{> mnuScheduler}} {{> Template.dynamic template=currentTemplate}}
</body>

So the template being used is currentTemplate. What's that? currentTemplate is actually a helper function on the body, which is in the .js file corresponding to the .html file above:

JavaScript

Template.body.helpers({
  currentTemplate: function () {
  return Session.get('curTemplate');
  }
});

So, whatever 'curTemplate' is currently set to, that is what the main page's template will be. So what is 'curTemplate' set to? At first, it's set to the Template that you want to be your "home page"'s template, like so (in the same .js file as shown above):

JavaScript

Meteor.startup(function () {
  Session.setDefault('curTemplate', 'dbilledPlatypus');
});

So the Template displayed on the main page starts out as, in this case, 'dbilledPlatypus'. Obviously, you have to have a Template with that name in your project, so it can be found and used.

HTML

<template name="dbilledPlatypus">
  . . .
</template>

Turning Up the Heat in the Sauna

So now what? You want to change the value of the 'curTemplate' session variable at times. For example, you might do it when a menu item is clicked. Take this menu item, for instance:

HTML

<template name="mnuPlatypi"><ul class="top-level-menu"><li> 
</li><li> <a href="#">Platypi</a><ul class="second-level-menu">
<li> </li><li id="mniOpenExisting" name="mniOpenExisting">Open Existing
</li><li>
                . . .</li></ul></li></ul></template>

To respond to the menu being clicked and change the value of the Template, add code like this to your .js file:

JavaScript

Template.mnuPlatypi.events({
  "click #mniOpenExisting": function (event) {
    Session.set('curTemplate', 'scheduleOpenExisting');
   }
   // TODO: Add the rest of the mni event handlers
}); // body events

So the 'curTemplate' Session var is changed to 'scheduleOpenExisting' and that Template then dynamically replaces the previous Template ('dbilledPlatypus') on the main page. You can, of course, change the current Template in similar fashion elsewhere in the code, in response to whatever. Due to using Template.dynamic, that's all there is to it! It's practically magic!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

B. Clay Shannon

Founder Across Time & Space

United States

I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006: http://www.lulu.com/spotlight/blackbirdcraven

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Taking your Meteor to the Spa

Massaging your Main Body

Turning Up the Heat in the Sauna

License

Comments and Discussions