Skip to content

Instantly share code, notes, and snippets.

@tbranyen tbranyen/page.js
Created Apr 19, 2013

What would you like to do?
Creating pages with Backbone and Layout Manager.
// 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.
// 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.
initialize: function() {
// Set the header and footer nested Views to the ui.
"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
exports.Router = Backbone.Router.extend({
routes: {
"": "index"
index: function() {
var page =;
title: "explore",
// Set layout content here.
layout: new exports.Views.Browser()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.