Iron Router is a meteor that allows us to create routes (‘url’) to display templates. The routes are defined on either the client or the server.

The code in this post is on github, to get it run:

git clone https://github.com/RemyNoulin/ironrouter.git

Iron Router and its documentation are at:

Iron Router on atmosphere

Documentation

In this post, I show how to use Iron Router:

  1. How to create urls and templates
  2. How to create routes
  3. How to trigger a function binded to a route
  4. How to go to url using javascript
  5. How to create routes with parameters
  6. How to use layouts

1. How to create urls and templates

Create a meteor app and add iron:router:

meteor create ironrouter
cd ironrouter
meteor add iron:router

With router, I define 3 routes (Home, one and two):

  • template Home is /
  • template one is /one
  • template two is /two

The templates that are going to be displayed for each route are regular templates. I declare them in ironrouter.html:

<template name=“Home”>

<h1>Home</h1>
<p>Data Title: </p>
</template>

<template name=“one”>

<h1>Page One</h1>
</template>

<template name=“Two”>

<h1>Page Two</h1>
</template>

<template name=“Nav”>
  <ul><li>
      <a href="/">Meteor Lund</a>
    </li><li>
      <a href="/one">Page One </a>
    </li><li>
      <a href="/two">Page Two</a>
  </li></ul>
</template>

2. How to create routes

The routes are created by calling the Router.route method. I declare them in the client code in ironrouter.js:

Router.route('/', function () {
  this.render('Home');
});

// when you navigate to “/one” automatically render the template named “One”.
Router.route('/one');

// when you navigate to “/two” automatically render the template named “Two”.
Router.route('/two');

3. How to trigger a function binded to a route

When a route is activated, the onRendered method of template is called. Callbacks can be added to any template events. I add my functions in the client code, they print a string on the web console when a route is activated:

Template.Home.onRendered(function () {
  console.log('home');
});
Template.one.onRendered(function () {
  console.log('one');
});
Template.one.onDestroyed(function () {
  console.log('destroyed one');
});

4. How to go to url using javascript

Routes can be triggered directly from javascript with Router.go. Here I show how to trigger a route by clicking on a button.

I add the button to ironrouter.html:

<template name=“MyButton”>
  <button id=“clickme”>Go to Page One</button>
</template>

I add the code for the button in ironrouter.js:

Template.MyButton.events({
  'click #clickme': function () {
    Router.go('/one');
  }
});

5. How to create routes with parameters

Parameters in the url can be processed to rendering content dynamically. I use a url of type: ‘/post/id’. I declare the route with Router.route in ironrouter.js:

// given a url like “/post/5”
Router.route('/post/:_id', function () {
  var params = this.params; // { _id: “5” }
  var id = params._id; // “5”
  this.render('Home', {data: {title: id}});
});

The template Home is rendered with the parameter in the url.

6. How to use layouts

With layouts, the developer can avoid duplicating html code. The application layout is defined in the applayout template. ‘> yield’ defines region where content templates are rendered. In this example, the route ‘/two’ renders the applayout:

<template name="applayout">


</template>

<template name="page">
<h1>Page for layout 'main'</h1>
<p>
  Data Title: 
</p>
</template>

In the top region, I render the ‘Nav’ template and in the main region, I render the ‘page’ template with data:

  Router.route('/two', function () {
    this.layout('applayout');
    this.render('Nav', {to: 'top'});
    this.render('page', {data: {title: 'Page template for route two'},to: 'main'});
  });