Events

Events are important, yet the source of mismanaged memory in Backbone applications. LayoutManager has been designed to provide you useful events and cleaning them up correctly.

Built in events

There are two built in events inside of LayoutManager: beforeRender and afterRender.

beforeRender

This event is called on the View that had render triggered on it. You must have this event bound before rendering. This is useful for modifying the state of the layout, before it is rendered. It is triggered after the beforeRender function.

myLayout.on("beforeRender", function(view) {
  // Do something to view, before rendered.
});

afterRender

This event is called on the View that had render triggered on it. You must have this event bound before rendering. This is useful for modifying the rendered contents of the layout, after it is rendered. It is triggered after the afterRender function.

myLayout.on("afterRender", function(view) {
  // Do something to view, after rendered.
});

Cleanup

Assuming you have an event-driven application designed, you'll need to ensure those events are properly cleaned up. As of Backbone 0.9.9 any events bound with listenTo will be automatically cleaned up after calling stopListening. LayoutManager will automatically perform this task for you at the appropriate time. It will also continue to clean up events bound with on on the model and collection properties.

Event bubbling

A new addition to LayoutManager is the ability to propagate custom events up the parent -> child View chain.

var layout = new Backbone.Layout();
var child = new Backbone.View({ manage: true });

// Insert the View.
layout.insertView(child);

// Listen to an event
layout.on("someChildEvent", function() {
  console.log("Event bubbled.");
});

// Trigger the event on the child.
child.trigger("someChildEvent");