I am using the 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 ?

I am using the Backbone Boilerplate https://github./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./hbarroso/backbone-boilerplate?

• javascript
• node.js
• backbone.js
• single-page-application
• backbone-boilerplate

Share Improve this question Follow asked Feb 17, 2013 at 22:43 HP.HP. 19.9k5656 gold badges159159 silver badges258258 bronze badges 3

• I left you a ment 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 Commented Feb 17, 2013 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. blog.hasith/2012/11/how-much-multi-page-single-page.html – Hasith Commented Feb 26, 2013 at 17:14
• 1 possible duplicate of How do I use Backbone.js for a multi-page web app? – THelper Commented Mar 31, 2014 at 14:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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/. 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!