Multiple Pages with Backbone.js

You can definitely try a different pattern, but I'm not sure if it will help. Multiple pages can be reached in different ways.

A good reference example for a basic boiler is: http://githubviewer.org/ . I released the whole thing as open source and you can see how the main pages are added there.

You might want to get creative and create a page model that handles which page you are on and within each route specify a new page title and which layouts to use.

A very simple, proof-of-concept, the implementation inside app/router.js

might look something like this:

define([
  // Application.
  "app",

  // Create modules to break out Views used in your pages.  An example here
  // might be auth.
  "modules/auth"
],

function(app, Auth) {

  // Make something more applicable to your needs.
  var DefaultPageView = Backbone.View.extend({
    template: _.template("No page content")
  });

  // Create a Model to represent and facilitate Page transitions.
  var Page = Backbone.Model.extend({
    defaults: function() {
      return {
        // Default title to use.
        title: "Unset Page",

        // The default View could be a no content found page or something?
        view: new DefaultPageView();
      };
    },

    setTitle: function() {
      document.title = this.escape("title");
    },

    setView: function() {
      this.layout.setView(".content", this.get("view")).render();
    },

    initialize: function() {
      // Create a layout.  For this example there is an element with a
      // `content` class that all page Views are inserted into.
      this.layout = app.useLayout("my-layout").render();

      // Wait for title and view changes and update automatically.
      this.on({
        "change:title": this.setTitle,
        "change:view": this.setView
      }, this);

      // Set the initial title.
      this.setTitle();

      // Set the initial default View.
      this.setView();
    }
  });

  // Defining the application router, you can attach sub routers here.
  var Router = Backbone.Router.extend({
    routes: {
      "": "index"
    },

    index: function() {
      // Set the login page as the default for example...
      this.page.set({
        title: "My Login Screen!",

        // Put the login page into the layout.
        view: new Auth.Views.Login()
      });
    },

    initialize: function() {
      // Create a blank new Page.
      this.page = new Page();
    }
  });

  return Router;

});

      

        
        
        
      

    

As you can see, this is a stubborn way of creating "pages" and I'm sure others have better implementations. In Matchbox I have a very robust page model that makes breadcrumbs and determines which navigation buttons to highlight based on state. You can also create routers inside your modules to encapsulate the functionality and expose the page model to the application object so that it is available in your application.

Hope this helps!