The problems

What are Views in Backbone?

• Mostly Conventions (API)
• DOM Events

and that's basically it.

Many questions unanswered

• How do I fit these pieces together?
• How do I scale this?
• Memory management?
• How do I start the app?

Backbone Marionette

• Composite application library
• Collection of common design patterns found in BB apps
• Excellent Memory Management

View Abstractions

• ItemView
• CollectionView
• CompositeView
• Layout (with Regions)

ItemView

Render a model using template:

MyItemView = Marionette.ItemView.extend({
  template: _.template('Hello, <%= name %>')
});

new MyItemView({ model: … }).render();
        

CollectionView

Loop through collection, render an ItemView per model:

MyCollectionView = Marionette.CollectionView.extend({
  itemView: MyItemView
});

new MyCollectionView({ collection: … }).render();
        

CompositeView

Loop through collection, ItemView per model, with context:

MyCompositeView = Marionette.CompositeView.extend({
  template: _.template('<thead>…</thead><tbody></tbody>'),
  itemViewContainer: 'tbody',
  itemView: MyItemView
});

new MyCompositeView({ collection: … }).render();
        

Layout / Region

+--------------------------------------+
| <img src="logo.png"> etc             |
+--------------------------------------+
| <div id="menu-bar"></div>            |
+--------------------------------------+
| <div id="main-content">              |
|                                      |
|                                      |
| </div>                               |
+--------------------------------------+
| <footer>copyright statement</footer> |
+--------------------------------------+
        

Layout / Region

MyLayout = Marionette.Layout.extend({
  template: "#my-layout-template",

  regions: {
    menu: "#menu-bar",
    content: "#main-content"
  } 
});

layout = new MyLayout();
layout.render();

layout.menu.show(new MenuView());
layout.content.show(new ContentView());
        

The Application Object

Allows to add further abstraction levels as necessary.

MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
  mainRegion: "#main"
});

var layout = new AppLayout();
MyApp.mainRegion.show(layout);

layout.show(new MenuView());
        

The Application Object

You can also add function to be called on startup:

MyApp.addInitializer(function(options){
  new MyAppRouter();
  Backbone.history.start();
});
        

The Application Object

The app object also has an event bus (called vent):

MyApp.vent.on("foo", function(){
  alert("bar");
});

MyApp.vent.trigger("foo");
        

The Application Object

And, finally, to start the damn thing:

options = { foo: "bar" };

MyApp.start(options);