< >

Marionette.Application

The Application is used to model your Marionette application under a single
entry point. The application provides:

The Application comes with a start method. This can be used to accomplish
tasks before the rest of your application begins. Let's take a quick look at an
example:

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

// Create our Application
var app = new Mn.Application();

// Start history when our application is ready
app.on('start', function() {
  Bb.history.start();
});

// Load some initial data, and then start our application
loadInitialData().then(app.start);

Live example

In the simple example above, we could have just as easily started history after
our initial data had loaded. This pattern becomes more useful as the startup
phase of your application becomes more complex.

Documentation Index

Root Layout

As the Application is the entry point to your app, it makes sense that it will
hold a reference to the root entry of your View tree. Marionette 3 has added
this with the region attribute and showView. This example demonstrates how
we can use this:

var Mn = require('backbone.marionette');
var RootView = require('./views/root');


var App = Mn.Application.extend({
  region: '#root-element',

  onStart: function() {
    this.showView(new RootView());
  }
});

var myApp = new App();
myApp.start();

Live example

This will immediately render RootView and fire the usual triggers such as
before:attach and attach in addition to the before:render and render
triggers.

Initialize

Like other objects in Backbone and Marionette, Applications have an initialize
method. It is called immediately after the Application has been instantiated,
and is invoked with the same arguments that the constructor received.

var Bb = require('backbone');
var Mn = require('backbone.marionette');

var App = Mn.Application.extend({
  initialize: function(options) {
    console.log('My value:', options.model.get('key'));
  }
});

// The application won't attach a model by default - this merely passes it into
// the options object to be, potentially, passed into views.
var app = new App({model: new Bb.Model({key: 'value'})});

Live example

Application Triggers

The Application object will fire two triggers:

before:start

Fired just before the application is started. Use this to prepare the
application with anything it will need to start, for example setting up
routers, models, and collections.

start

Fired as part of the application startup. This is where you should be showing
your views and starting Backbone.history.

Application Lifecycle

When Application was initialized and start method was called
a set of events will be called in a specific order.

Order Event
1 before:start
2 start
var Bb = require('backbone');
var Mn = require('backbone.marionette');

var MyModel = require('./mymodel');
var MyView = require('./myview');

var App = Mn.Application.extend({
  initialize: function(options) {
    console.log('Initialize');
  },

  onBeforeStart: function(options) {
    this.model = new MyModel(options.data);
  },

  onStart: function(options) {
    this.showView(new MyView({model: this.model}));
    Bb.history.start();
  }
});

var app = new App(options);
app.start();

Live example

As we'll see below, the options object is passed into the Application as an
argument to start.

Starting An Application

Once you have your application configured, you can kick everything off by
calling: MyApp.start(options).

This function takes a single optional parameter. This parameter will be passed
to each of your initializer functions, as well as the initialize events. This
allows you to provide extra configuration for various parts of your app throughout the
initialization sequence.

var app = new App();

app.start({
  data: {
    id: 1,
    text: 'value'
  }
});

Method Reference

The Marionette Application provides helper methods for managing its attached
region.

getRegion()

Return the attached region object for the Application.

showView(View)

Display View in the region attached to the Application. This runs the same
view lifecycle as View.showChildView.

getView()

Return the view currently being displayed in the Application's attached
region. If the Application is not currently displaying a view, this method
returns undefined.

Marionette.Object Methods

Marionette.Application extends Marionette.Object and, as such, implements
the same method interface. See the Object
reference for the full list.

Improve this page