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:

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

I left you a comment on what I think you're asking. However, if you're talking about building something other than a single page application, then the Backbone Boilerplate probably isn't best suited to that. — tbranyen, Feb 17 '13 at 23:22
Have a look at my blog post here. I have documented some practices that will be helpful for you to create a hybrid application. http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html — Hasith, Feb 26 '13 at 17:14
possible duplicate of [How do I use Backbone.js for a multi-page web app?](http://stackoverflow.com/questions/14718806/how-do-i-use-backbone-js-for-a-multi-page-web-app) — THelper, Mar 31 '14 at 14:02

score 5 · Accepted Answer · answered Feb 17 '13 at 23:19

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!

So in your example, how does the Page model know which page are you on? Let say page1.html vs. page2.html which is apart of the URL. Maybe I missed something... — HP., Feb 18 '13 at 00:32
It works off of location.hash or pushState in HTML5-capable browsers. They are virtual pages. If you want physical pages, then Backbone Boilerplate (and potentially Backbone) are not the right tool for the job. — tbranyen, Feb 18 '13 at 01:04
I am thinking "physical" page. But could they just link to the same config.js and start from there to figure out the full URL? — HP., Feb 18 '13 at 03:32
I just read this article again http://www.henriquebarroso.com/creating-a-dynamic-modular-multi-page-app-with-backbone-js-and-requirejs/ and seems like it's possible NOT to have multiple physical pages at all. Basically, index.html file can be just the master template file. Each URL will be handled the same. The only difference in this framework is instead of app.js pointing to initializing of that page, this basically points to another "bundle" which handle specific page (or url). In theory, it's still Single Page App. Pretty smart idea indeed. — HP., Feb 19 '13 at 21:22

Multiple pages with Backbone.js

1 Answers1