Page Titles

Page Title Set in the Controller

These should be set in the controller. In the controller the code should be:

this.app.set('title', 'my title here');

Layout contains the place holder for the title

__layout.hbs contains the following code to help add in the code.

{{#appData.title}}
<title>{{this}}</title>
{{else}}
<title>Default here</title>
{{/appData.title}}

Base page view will change on the client side when the title changes

Then, in our app/views/base_page.js view, which our page views inherit from, we have:

var BaseView = require('./base'),
    _ = require('underscore'),
    Handlebars = require('handlebars');

// Create a base view, for adding common extensions to our
// application's views.
module.exports = BaseView.extend({
    initialize: function() {
        BaseView.prototype.initialize.call();
        this.events = _.extend({}, this.events, BaseView.prototype.events, this.events);

        var isServer = typeof window === 'undefined';

        if (!isServer) {
            this.app.on('change:title', function(app, title) {
                document.title = title;
            });
        }
    },
    postRender: function() {
        BaseView.prototype.postRender.apply(this);
    }
});

which helps update the page title on the client-side.

Current page inherits from the base page

Then, our page view must inherit from the base_page.js. For example an app/views/employees/index.js could be:

var BaseView = require('../base_page');

module.exports = BaseView.extend({
    className: 'employees_index_view'
});

module.exports.id = 'employees/index';