Rendering Layouts and sub-views in Marionette / Backbone.js

Asked By: Anonymous

I have a working solution in regard to rendering layouts with views in regions in a Marionette application I’m working on, but something doesn’t feel right about it. Do you have to append anything directly to the DOM?

Here is my method in the controller:

 //Grab the main Layout
        var layout = new APP.Views.LayoutView();

        //Render that layout

         //Make the model
        var simpleModel = new APP.Models.simpleModel({
          "field1" : "foo",
          "field2" : "bar"
 APP.Views.subView({model: simpleModel}));


It’s the last part that feels unnatural to me. This is primarily because if I move ‘’ to after the .html(), then it doesn’t render properly. What’s the point of regions if they aren’t dynamically changable after pushing it to the DOM?

Here is my layout:

APP.Views.LayoutView = Backbone.Marionette.Layout.extend({

  template: "#layoutTemplate",

  className : 'wrapper',

  regions: {
    header: "#header",
    footer: "#footer"


and here is the sub view:

APP.Views.subView = Backbone.Marionette.ItemView.extend({

    template : '#headerTemplate',

    className: 'container'


As I said, this works, but it feels like I’m not using regions properly. Is there a better, more concise way to do this that will allow you access to regions after you rend the layout to the DOM?

In the Marionette documentation there seems to be no mention of using .html() to get things on the page — I’m wondering if this is left out because it’s not needed or that it’s assumed.

Can anyone help?


Answered By: Anonymous

Okay, so it seems like this can be circumvented by creating a ‘region’ in your application, then using .show() to show the layouts inside of it.

Here is a link to a fiddle I found on SO that helped:

as well as to another question: Understanding layouts in Marionette for Backbone.js

The fiddle in particular has this code:

App = new Backbone.Marionette.Application();
   'nav': '#nav',
  'content': '#content'

Which the programmer than uses to add layouts to those regions — meaning you never have to append to the DOM.

If anyone else has a more elegant solution, please post!

techinplanet staff

techinplanet staff

Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno