Integrating with Routing

One of the biggest uses of the Application is to start your router, which in turn starts rendering your initial views. This is normally quite straightforward from our driver.js file:

var Marionette = require('backbone.marionette');

var Router = require('./router');


var app = new Marionette.Application({
  onStart: function(options) {
    var router = new Router(options);
  }
});

app.start();

This is an ideal way to pass page data into router, as well as the rest of our application.

Loading Initial Data for Push State

We can use the Router in combination with the initial data pattern to allow our server to respond to HTML5 Push State URLs by sending initial data to the application to be rendered from the Router. Simply modify our driver file like so:

var app = new Marionette.Application({
  onStart: function(options) {
    var router = new Router({
      pushState: true,
      initialData: options.initialData
    });
  }
});

app.start({initialData: window.initialData});

Now, when our Router responds to the URL from HTML Push State, we'll also send in any data specific to that page to be immediately rendered.

Examples

We'll just take a few minutes to look at potential example pages that a server could generate for given URLs. Assuming the rest of the page remains the same, we'll just be looking at the <script> tag that generates the initialData key.

/

window.initialData = {
  guides: [
    {
      name: 'Marionette',
      url: '/guides/marionette'
    },
    {
      name: 'Ember',
      url: '/guides/ember'
    }
  ],
  authors: [
    {
      name: 'Scott Walton',
      email: '[email protected]'
    },
    {
      name: 'Joanne Daudier',
      email: '[email protected]'
    }
  ]
}

The Router will trigger the handler bound to the '' route and inject two lists of guides and authors into the application to be rendered (or not).

/guides/marionette

window.initialData = [
  {
    name: 'The Marionette Guide',
    authors: [
      {
        name: 'Scott Walton',
        email: '[email protected]'
      },
      {
        name: 'Joanne Daudier',
        email: '[email protected]'
      }
    ],
    published: '2015'
  },
  {
    name: 'Marionette: A Gentle Introduction',
    authors: [
      {
        name: 'David Sulc',
        email: '[email protected]'
      }
    ]
  }
];

This data will trigger the handler bound to the 'guides/:guide' route and inject a list of Marionette guides and their authors to be rendered. This is obviously useful when we have a short list that's easy for the server to include with the page being loaded. When the application has loaded, we'll only need to request the data as and when we need it. On the initial application load, no matter what page we start from, we'll always get some data that we can render immediately.

This pattern lets us make the best use of HTML5's Push State to get the best of both worlds. Even better, this pattern only requires us to change the template that our server generates - our JavaScript files are safely cached and we don't need to keep duplicating the same basic functionality!