Basics

This section will describe getting started with LayoutManager.

The Layout object.

Accessing

You can access this class constructor either independently from Backbone or attached to the Backbone namespace.

Node.js

var Layout = require("backbone.layoutmanager");

// Configure globally.
Layout.configure({ });

Basic script inclusion

// Configure globally.
Backbone.Layout.configure({ });

Asynchronous Module Definition (AMD)

require(["backbone.layoutmanager"], function(Layout) {
  // Configure globally.
  Layout.configure({ });
});

Instance

Creating a new instance is easy.

// Example Layout.
var layout = new Backbone.Layout({ template: "#layout" });

If you want to differentiate between your Layouts and nested Views, you can set the manage: true property globally and use View like Layout.

// Set all Views to be managed by LayoutManager.
Backbone.Layout.configure({ manage: true });

// Example View.
var view = new Backbone.View({ template: "#view" });

Methods

When you create a new instance you can access a number of Methods.

Example of usage:

myView.insertView(".something", new SomeView()).render();

The View object.

By default the Backbone.View class constructor remains identical, except that _configure is patched to allow for manage: true.

Convert to Layout

There are two ways to convert a Backbone.View into a LayoutManager managed View.

manage: true

This is the most common way to set up a View for use with LayoutManager. Especially useful for plugins and code that you can't switch to Backbone.Layout.

This method has the ability to be set globally for all Backbone.View's. This is a default in Backbone Boilerplate and considered a good practice.

If you set the global property and break a third party View, you can set manage: false on it to reverse the effect.

setupView

This method is very rarely used, but may be useful for when you are receiving a View instance and would like to convert it.

// Converts an ordinary Backbone.View into a LayoutManager managed View.
Backbone.Layout.setupView(myView);