Creating an Application
The Marionette.Application
base class is used as the root of your application.
The Application
is commonly used to:
- Transfer any data from the surrounding page into your application.
- Initialize your regions and views.
- Start your router.
This section explores the different use cases and how to combine them effectively.
Starting your Application
The most common application pattern is to construct your view hierarchy and
populate your initial data from your surrounding screen in the onStart
handler.
The application lives in your driver.js
or main.js
file and looks like:
var Marionette = require('backbone.marionette');
var Layout = require('./views/layout');
var app = new Marionette.Application({
onStart: function(options) {
var layout = new Layout(options);
layout.render();
}
});
app.start();
This simple pattern will work for many types of application. It also works well for index pages with data injected from a server-side template.
Initial Server data
Sometimes we want to pre-load data from the server. We'd usually do this to
minimize server round-trips and load our data faster. Let's look at the
following index.html
template that our server generated for us:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="body-hook"></div>
<script>
/** This section was generated by a server template engine e.g. Django
or Ruby on Rails
*/
window.initialData = [
{
id: 1,
url: '/item/1',
strapline: 'Make your applications dance',
title: 'Marionette'
},
{
id: 3,
url: '/item/3',
strapline: '',
title: 'Backbone.js'
}
];
/** End server generated section */
</script>
<script src="/static/js/app.js"></script>
</body>
</html>
Now we'll modify our driver.js
file to look for the initial data from the
server:
var Marionette = require('backbone.marionette');
var Layout = require('./views/layout');
var app = new Marionette.Application({
onStart: function(options) {
var layout = new Layout(options);
layout.render();
}
});
app.start({initialData: window.initialData});
All we've done here is pass window.initialData
as an argument to app.start
.
Maintaining a dependency on the page in our driver file is perfectly
acceptable - that is its purpose after all! When we want to test our app, we can
simply inject the options directly into Layout
in our test runner. For this
reason, it's preferable to keep our driver.js
file as simple as possible - we
want to minimize the amount of setup code we need to duplicate.