public
Last active

Marionette.Layout

  • Download Gist
1.js
JavaScript
1 2 3 4 5 6 7 8
MyLayout = Backbone.Marionette.Layout.extend({
template: "#layout-template",
 
regions: {
myRegion: "#some-div",
anotherRegion: ".another-element"
}
});
2.js
JavaScript
1 2 3 4 5 6
var myLayout = new MyLayout();
MyApp.someRegion.show(myLayout);
 
// somewhere else in the code
myLayout.myRegion.show(anotherView);
myLayout.anotherRegion.show(moreView);
3.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// from BBCloneMail.Layout.js
 
var Layout = Backbone.Marionette.Layout.extend({
template: "#layout-template",
 
// These are my visual regions: the "navigation" or
// left hand list of categories, and the "main"
// content area where the email list or contact list
// is displayed.
regions: {
navigation: "#navigation",
main: "#main"
},
 
// more stuff here, including DOM event handlers
});
4.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13
BBCloneMail.addInitializer(function(){
// Render the layout and get it on the screen, first
BBCloneMail.layout = new Layout();
var layoutRender = BBCloneMail.layout.render()
$("body").prepend(BBCloneMail.layout.el);
 
// This kicks off the rest of the app, through the router
layoutRender.done(function(){
Backbone.history.start();
});
 
});

I was following the example in 4.js, but var layoutRender doesn't seem to be a jquery deferred object. Is this something special I need to set up in render? Backbone docs say render returns the View for chaining.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.