Setting the document title with Meteor

Question

I'm just starting with Meteor. In an app which is to be localized, I want to set the document title.

I am following the advice given by Bernát

In my barebones version, I have just 2 documents:

head.html

<head>
  <meta charset="utf-8">
  <title>{{localizedTitle}}</title>
</head>

ui.js

UI.registerHelper("localizedTitle", function() {
  var title = "Localized Title"
  document.title = title;
});

When the app loads, the document title is "{{localizedTitle}}". If I call UI._globalHelpers.localizedTitle() from the console, the correct title is shown.

What do I have to do to get the localized title to show when the page is loaded?

EDIT: This works for me, but it seems to be a bit of a hack. The title template does nothing but get itself rendered, which actually adds nothing to the interface.

body.html

<body>
{{> title}}
</body>

<template name="title">
</template>

title.js

Template.title.onRendered(function () {
  document.title = getLocalizedString()

  function getLocalizedString() {
    return "Title : in English"
  }
})

SylvainB · Accepted Answer · 2015-08-20T21:26:05.600

Following Bernát's answer, your global helper should not be called in the head's <title> tag, but within the <template> tag of the template where you wish to have a given title. In Meteor, <head> does not count as a template, therefore you cannot use Spacebars notation in it: it will just be considered as simple text.

Also, keep in mind that your helper will not return (i.e. print) anything to the page. document.title = "something" directly assigns "something" to your ` tag. So no need to call your helper inside it!

So, say you want to have the "Localized Title" title for a page using the localized template :

<template name="localized">
  <h1>This is the localized page</h1>
  {{localizedTitle}}
</template>

Here, your trick should work.

score 0 · Answer 2 · answered Aug 20 '15 at 17:39

0

I've found it convenient to set the title in onAfterAction in my iron-router routes:

onAfterAction: function(){
  document.title = 'foo'; // ex: your site's name
  var routeName = Router.current().route.getName();
  if ( routeName ) document.title = document.title + ': ' + routeName;
}

answered Aug 20 '15 at 17:39

Michel Floyd

18,793
4
24
39

I haven't started looking at iron:router yet. One thing at a time. – James Newton Aug 20 '15 at 17:49
1

You'll eventually get there, or to flow-router ;) – Michel Floyd Aug 20 '15 at 17:51
2

In any event, @BraveKenny is right, the only way to set the document title is from javascript. The only issue for you is how to trigger that js to run. Your template's *onRendered* callback, iron-router, etc... are all effective choices. – Michel Floyd Aug 20 '15 at 18:47

score 0 · Answer 3 · answered Jan 06 '16 at 18:41

I think a more elegant solution is to make the title reactive and set it via a Session variable (other reactive data sources are of course also OK). Like that:

Template.body.onRendered(function() {
  this.autorun(function() {
    document.title = Session.get('documentTitle');
  });
});

Now every time you set the 'documentTitle' variable with

Session.set('documentTitle', 'Awesome title');

the page title will change. No need for hacks and you can do this anywhere in your client code.

score 0 · Answer 4 · answered Jan 07 '16 at 10:37

0

Try this instead:

UI.registerHelper('title', function() {
 return 'LocalizedTitle'
});

we can use title where ever you want

you can use like this {{title}}

answered Jan 07 '16 at 10:37

sravanthi

247
1
6

Setting the document title with Meteor

4 Answers4