Meteor.js Handlebar Returns different Text depending on current Route in Iron Router

Question

Meteor.js Handlebar Returns different Text depending on current Route in Iron Router

When using Iron Router with Meteor.js 0.8.3, how can I have a text in a view template that changes depending on which route the user is on?

For example, if a user is at /profile, the text would be User Profile and if he is at / the text will be Home.

header.html

<template name="header">
    <h1>{{ routeTitle }}</h1>
</template>

profile.html

<template name="profile">
    {{> header}}
</template>

router.js

Router.map( function() {

    this.route('index', {
        path: '/',
        template: 'index'
    })

    this.route('profile', {
        path: '/profile/:_id',
        template: 'profile',
        data: function() { return Users.findOne(this.params._id); }
    })

})

javascript
node.js
meteor
handlebars.js

Answer 1

I personally store my own properties in the route options like this :

Router.map(function(){
  this.route("index", {
    // iron-router standard properties
    path: "/",
    // custom properties
    title: "Home"
    //
    controller: "IndexController"
  });
  this.route("profile", {
    path: "/profile/:_id",
    title: "User profile",
    controller: "ProfileController"
  });
});

Then I extend the Router with a set of utilities functions to access the current route.

_.extend(Router,{
  currentRoute:function(){
    return this.current()?this.current().route:"";
  }
});

UI.registerHelper("currentRoute",Router.currentRoute.bind(Router));

Using these utilities, you can call Router.currentRoute() in JS which happens to be a reactive data source too, as it acts as a wrapper for Router.current().

Use Router.currentRoute() && Router.currentRoute().options.title to check whether there is a current route and fetch the title you declared in the route definition.

In templates you can use {{currentRoute.options.title}} to fetch the current title, this is helpful when working with iron-router layouts.

If you want to get more specific you can even mimic the Router.path and pathFor helper behavior :

_.extend(Router,{
  title:function(routeName){
    return this.routes[routeName] && this.routes[routeName].options.title;
  }
});

UI.registerHelper("titleFor",Router.title.bind(Router));

Now you can call Router.title("index") in JS and {{titleFor "index"}} in templates.

You can even get as far as having a dedicated helper for the current route title, as you suggested in your question :

UI.registerHelper("currentRouteTitle",function(){
  return Router.currentRoute() && Router.currentRoute().options.title;
});

Answer 2

You can achieve this very easily with data param of the path:

Router.map(function() {

  this.route('...', {
    ...
    data: function() {
      return {
        importantText: 'User Profile',
      };
    },
  });

});

Now use it as any other data object in your rendered template, layout template, or any of the templates rendered to named area:

{{importantText}}