StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORendering Layouts with Backbone.js
text
Body
copied!<p>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?</p> <ul> <li>ControllerA is a three column layout.</li> <li>ControllerB is a two column layout.</li> <li>The default route activates ControllerA.Welcome() -- the initial rendering.</li> <li>Both controllers have different views rendered within their columns that take advantage of all the Backbone.js model/view goodness.</li> </ul> <p><strong>The Problem</strong></p> <p>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.</p> <p><strong>My First Thought</strong></p> <p>Would you use a Backbone.js view to render the layout, and then, render each column with it's model-bound views?</p> <p><strong>My Second Thought</strong></p> <p>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.</p> <p>Here is a snippet for my second thought:</p> <pre><code>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...'); } }); </code></pre> <p><strong>Thank You</strong></p> <p>Thanks for taking the time to respond. I appreciate it!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload