Login/Register
Set HTML title when using iron-router
Asked Answered
Solved javascriptmeteorhandlebars.jsiron-router
B

3

6

How to best set the HTML title when using iron-router? Here's what I'd like to do:

<template name="layout">
    <head><title>{{KAZOOM}}</title></head>
    <body>
        {{> menu}}
        {{yield}}
    </body>
</template>

<template name="example">
    {{KAZOOM 'example page'}}
    That's just an example page
</template>

<template name="foo">
    {{KAZOOM 'foo page'}}
    Another example page with different HTML title
</template>

You see how the KAZOOM travels back in time to set the HTML title? The reason I wish to do it that way is that I consider the HTML title to be part of the content. It would be nice I could adjust the HTML title of a page by just editing the template that generated it. Unfortunately I don't see a clean way to achieve this. The closest I can think of would be named yields, then the title would be set by the route, not by the template.

The other possibility is to just forgo the layout template and always include a header:

<template name="head">
    <head><title>{{this}}</title></head>
    {{> menu}}
</template>

<template name="example">
    {{> head 'example page'}}
    That's just an example page
</template>

<template name="foo">
    {{> head 'foo page'}}
    Another example page with different HTML title
</template>

That is not very nice. Do you have a proper solution to this?

Bleachers answered 9/11, 2013 at 20:28 Comment(1)
Answer can be found here: #14036748 – Trilobite
F
16

Set document.title onAfterRun in Iron router:

var pageTitle = 'My super web';
Router.map(function() {
   this.route('user', {
      onAfterRun: function() {
        document.title = 'User ' + this.params.name + ' - ' + pageTitle;
      }
   });
});

EDIT:

If you want to set title in template, create custom Handlebars helper (client code):

Handlebars.registerHelper("KAZOOM", function(title) {
    if(title) {
        document.title = title;
    } else {
        document.title = "Your default title";
    }
});

And use it in your templates as you used it

{{KAZOOM 'example page'}}

or 

{{KAZOOM}}

for default title.

EDIT 26 Jully 2015: for new Iron Router it would look like:

Router.route('/user', {
  onAfterAction: function() {
    document.title = 'page title';
  }
});
Fratricide answered 9/11, 2013 at 22:31 Comment(2)
Thanks, this works for static titles. I'd still prefer to set the title in the template, like all the other text – Bleachers
Why not use the package: iron-router-title ? – Mattox
J
10

I'm using iron-router 0.7.1.

And have this in libs/router.js

Router.onAfterAction(function() {
        document.title = 'My Site - '+this.route.name;
      }
);

Which handles all my routes, so I don't have to put it in every route.

Jennee answered 13/5, 2014 at 11:36 Comment(1)
this.route.getName() now, it appears – Jube
A
4

I prefer to have the title attribute stored right with the route definition.

As suggested by @nullpo on this issue https://github.com/iron-meteor/iron-router/issues/292#issuecomment-38508234

Router.route('/admin/users', {
    name: 'admin_users',
    template: 'admin_users',
    title: 'User Manager'
    data: function() {
        return Meteor.users.find();
    },
    waitOn: function() {
        return Meteor.subscribe('users_admin');
    }
});

Router.after(function(){
    if (this.route.options.title)
        document.title = this.route.options.title + ' - my cool site';
});

Hope this helps.

Avouch answered 1/11, 2015 at 21:49 Comment(1)
Best answer for me! It's a pity the title parameter doesn't get reevaluated if you use a reactive var in it. What would be the best solution if you want that kind of functionality? – Hooge

© 2022 - 2024 — McMap. All rights reserved.