How to change body template dynamically by using router in Meteor JS?

Question

I need to know about to change body templates dynamically whenever click button in meteor js.For example total 3 templates are there in my app.

1. one template is header template
2. 2nd one is side menu template
3. and another is content template

Whenever click menu items then only changing to content template by using router package and not goes to new page.So please suggest me what to do for this?

Thanks in Advance.

Answer 1

This is do-able using the layout and yeild functionnalities of the router. As defined in this awesom tutorial http://www.manuel-schoebel.com/blog/iron-router-tutorial

In Meteor we only render and rerender parts of the dom and not always the whole thing. As an example we want to have a layout that specifies a menu, a footer and an area where the main content is rendered in.

This gives this kind of html

<template name="complexLayout">
 <div class="left">
    {{> yield region="menu"}}
  </div>


  <div class="main">
    {{> yield}}
  </div>
  <div class="bottom">
    {{> yield region="footer"}}
  </div>
</template>

In this template are three areas that the Iron-Router renders in. One 'Main-Yield' and two 'Named-Yields' or 'Regions' with the names 'menu' and 'footer'. The names are important if we want to specify what template we want to render where. We now want that the Iron-Router to use our layout and to render the template 'myMenu' to the yield with the name 'menu' and the template 'myFooter' to the yield named 'footer'.

this.route('home', {
  path: '/',
  layoutTemplate: 'complexLayout',
  yieldTemplates: {
    'myMenu': {to: 'menu'},
    'myFooter': {to: 'footer'}
  }
});

Using this, all routes (or targeted ones) may have the same layout and have only some parts changed depending on the current page. Do not forget that one can use the Router.configure function to set defaults.

Router.configure({
  layoutTemplate: 'complexLayout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

Doing this will allow the developer to define the default layouts to use on different states of the application.