Creating pages with Backbone and Layout Manager.

page.js

// Application.
var app = require("app");

// Page specific Views.
var Views = require("modules/page/views");

module.exports = Backbone.Model.extend({
  defaults: {
    title: "Unknown Page"
  },

  // This formats the title to title case.
  titleCase: function() {
    var title = this.get("title");

    return title[0].toUpperCase() + title.slice(1);
  },

  // Not all pages can suffice without knowing about the entire layout, so
  // we allow custom layouts to be specified.
  setLayout: function(model, view) {
    // If the View's are not identical, then run `removeView` to clear out
    // all child views.
    if (model.layout && model.layout.template === view.template) {
      // Clear out all existing Views.
      model.layout.removeView();
    }
    
    // Set the new layout within the application frame.
    model.layout = app.ui.setView(".page", view);

    // Ensure the content is rendered.
    return view.render();
  },

  // This function makes pages behave more like they were server-side
  // rendered.
  setPage: function() {
    document.title = "Matchbox: " + this.titleCase();

    // Useful for styling.
    document.body.className = this.get("title").toLowerCase();

    // Get the header to update correctly when the page changes.
    app.ui.getView("header").render();
  },

  initialize: function() {
    // Set the header and footer nested Views to the ui.
    app.ui.setViews({
      "header": new Views.Header({ page: this }),
      "footer": new Views.Footer({ page: this })
    });

    // Whenever the content changes, update.
    this.listenTo(this, {
      "change:layout": this.setLayout,
      "change:title": this.setPage
    });
  }
});

router.js

exports.Router = Backbone.Router.extend({
  routes: {
    "": "index"
  },

  index: function() {
    var page = app.page;

    page.set({
      title: "explore",

      // Set layout content here.
      layout: new exports.Views.Browser()
    });
  }
});