Rendering Layouts with Backbone.js

Question

If you were to build a single page web application (SPWA) using Backbone.js and jQuery with--for example--two controllers that each required a unique page layouts, how would you render the layout?

• ControllerA is a three column layout.
• ControllerB is a two column layout.
• The default route activates ControllerA.Welcome() -- the initial rendering.
• Both controllers have different views rendered within their columns that take advantage of all the Backbone.js model/view goodness.

The Problem

When the user requests a route mapped to ControllerB, the entire page layout needs to change to no longer use the ControllerA layout. This would hide ControllerA's layout and show ControllerB's layout -- or, render the layout if not already in the DOM.

My First Thought

Would you use a Backbone.js view to render the layout, and then, render each column with it's model-bound views?

My Second Thought

Would you add a setup/layout method to your controller that used jQuery to render the layout and then allow the action responsible for the route do it's thing? Using jQuery within the controller feels a little off to me, but, I want the controller to be responsible for ensuring the right layout is visible for it's routes.

Here is a snippet for my second thought:

var Controller = Backbone.Controller.extend ({     routes :     {        "" : "welcome" // default action     }     /** Constructor **/     ,initialize: function(options)     {         console.log('Workspace initialized');                    }     // LAYOUT     ,renderLayout : function ()     {         console.log('Rendering Layout.');         var $ = window.$;         var layout = require('js/layout/app/big_menu');         $(layout.parent).html(layout.html);     }     // ACTIONS     /** Default Action **/     ,welcome : function ()     {         this.renderLayout();         console.log('Do the whole model/view thing...');     } }); 

Thank You

Thanks for taking the time to respond. I appreciate it!

Answer 1

I tend to agree with Julien -- it's nice to keep your layouts as stateless as possible. Everything is always laid out on the page, in skeleton form, at least. When the particular layout or configuration needs to be displayed, you lazily-render its contents, and display that portion of the UI with CSS. Mutually-exclusive CSS classes are useful for this, things like: "projects-open", "documents-open", "notes-open".