LayoutView

LayoutView

/*
    A simple task list app with standard sidebar and main area design
     _______________________
    |       |               |
    |sidebar|     main      |
    |_______|_______________|
*/

// Define a LayoutView and its Regions
var AppLayoutView = Backbone.Marionette.LayoutView.extend({
  template: "#my-app-layout",
  regions: {
    taskList: "#side-bar",
    taskDetail: "#main-content"
  }
});

// Create a LayoutView
var layoutView = new AppLayoutView();
layoutView.render();

// Show a list of tasks
layoutView.taskList.show(new TasksCollectionView());

// Show task detail view
layoutView.taskDetail.show(new TaskDetailView());

// Empties Region in the DOM and also destroys view while unbinding all listeners
layoutView.content.empty()