Layout structures without perf penalties.

[trusktr]

Using onRender for a root layout, and onBeforeShow for child layouts, is nice, but the structure of the layouts is hidden in the code and so a newcomer to the code has to traverse it to learn what's happening.

As mentioned, it's possible to do this (the very last example in that section) to put together a layout structure in a single place, but with performance penalties: http://marionettejs.com/docs/v2.3.1/marionette.layoutview.html#nested-layoutviews-and-views

It'd be super great to be able to do that without performance penalties. Perhaps something along the lines of (and considering that Application.regions are deprecated, so skipping that line)

var layout1 = new Layout1();
var layout2 = new Layout2();
var layout3 = new Layout3();

layout1.getRegion('region1').setView(layout2);
layout2.getRegion('region2').setView(layout3);

layout1.render(); // finally, show everything.

so that multiple renders don't happen. Some syntax like the following might show structure.

var layout2 = new Layout2();
var layout3 = new Layout3();
var layout3 = new Layout4();

var layout1 = new Layout1({
  region1: {
    el: ".region1"
    view: layout2
  },
  region2: {
    el: ".region2"
    view: layout3,
    regionFoo: {
      el: ".foo-region"
      view: layout4
    }
  }
});

And the structure of the application can be set up in a single place.

[jamesplease]

but the structure of the layouts is hidden in the code and so a newcomer to the code has to traverse it to learn what's happening.

What do you mean?

[trusktr]

What I mean is that we have to visit every layout module (suppose each layout is defined in it's own file/module) to understand the app's layout view hierarchy.

[jamesplease]

Is this any different than when you're using application regions?

[trusktr]

Same thing. Having regions in the Application just means we can initially see the top level of the layout inside the application instance instead of at the next level down in a LayoutView.

What I mean is to be able to see the whole structure of the nested layouts all at once.

F.e., instead of opening up each LayoutView subclass of an app and looking at it's onRender method to see what views it adds to its regions so that I could then open the files for those views, it's nice to be able to see it in a single place.

[trusktr]

If you try some of the demos at http://famo.us/university, you'll notice a structure similar to the first example above. The whole "tree" of the application is discernible all at once.

[ahumphreys87]

I think now that we've merged LayoutView into ItemView in the major branch, it will be good to look at the possibility of using a document fragment - similar to what we do in CollectionView to render all views in one go - I quite like the API that @trusktr has outlined above, maybe with some subtle changes this could work:

var layout2 = new Layout2();
var layout3 = new Layout3({
  regionFoo: {
    el: ".foo-region"
    view: layout4
  }
});
var layout4 = new Layout4();

var layout1 = new Layout1({
  region1: {
    el: ".region1"
    view: layout2
  },
  region2: {
    el: ".region2"
    view: layout3
  }
});