Multiple pages with Backbone.js

Question

I am using the Backbone Boilerplate https://github.com/tbranyen/backbone-boilerplate and don't know what's the best way to handle more than one page. I cannot find answer that helps me understand easily. Basically, I am thinking of those options:

1. Should each page has a different config.js? Like config-userpage.js, config-homepage.js...?
2. Should I have different router.js for different page instead? Like router-userpage.js or router-homepage.js,...?
3. Should I just try a different boilerplate like https://github.com/hbarroso/backbone-boilerplate?

Answer 1

You can definitely try a different boilerplate, but I'm not sure that will help. Multiple pages can be achieved in many different ways.

A good reference example for the Backbone Boilerplate is: http://githubviewer.org/. I have released the entire thing as open source and you can View how basic pages are added there.

You may want to get creative and make a Page model that handles what page you're on and inside of each route set the new page title and which layouts to use.

A very basic, proof-of-concept, implementation inside of 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 an opinionated way of creating "pages" and I'm sure other's have better implementations. At Matchbox, I have a very robust Page model that does breadcrumbs and figures out which navigation buttons to highlight based on the state. You can also create Routers inside your modules to encapsulate functionality and expose the Page model on the app object so that it's available throughout your application.

Hope this helps!