Marionette Application JS Tutorial

Sam Saccone (@samccone) is back with some more Marionette.js goodness.

Starting up a Marionette.js App with routing can be tricky and full of gotchas. Here is a jump start guide to get you going.

A typical single page app requires a few pieces:

A router
A controller
An application
A set of regions to show the views of our App

Marionette provides us with all of these pieces, and all that is left for us to do is put the pieces together.

First we want to create our application. We are hanging the root App object off of the window for this example. This is useful for debugging and interacting with your App

window.App = new Marionette.Application();

Next we will add a few regions to our application so that we can show things within our application.

App.addRegions({
  appRegion: “#app”,
  modalRegion: “#modal”
});

Next we set a handler on start of our app to setup our

Controller

and

Router

. We also kick off

Backbone.history

so that we can keep track of URL changes from within our app.

App.on("start", function () {
  App.Router = new MyRouter({ controller: new MyController() });
  Backbone.history.start({ pushState: true });
});

After that, we come to a a place where some people tend to get tripped up. Depending on the dependency management system you are using (AMD, Concating the files, etc.. etc..) You will need to wait untill all your script files are loaded to kick off the app. This is a simple task via jquery.

$(function () {
  App.start();
});

And just like that we have a Marionette Application ready for you to build out. With routing + controllers + regions.

Check out the ready to be bootstraped example here http://jsfiddle.net/samccone/F59qp/

Happy Hacking!

Kicking off a Marionette.js application