How to determine if I should use a layout view Marionette?

Question

I have skimmed through all the marionette articles on the layout view and I am not sure if there are advantages to using that versus how I have my app setup now, let me show you.

After building the components to my app I then created an app level view that handles the initialization and rending of all those views.

var Backbone   = require('backbone'),
    TeamsView  = require('./teams'),
    DataView   = require('./teamData'),
    LeaderView = require('./leader');

module.exports = appView = Backbone.View.extend({
    el: '#wrap',
    template: require('../../templates/app.hbs'),
    initialize: function() {
        window.App.views.teamsView = new TeamsView({ collection: window.App.data.teams });
        window.App.views.dataView  = new DataView({  collection: window.App.data.teams });
        window.App.views.leaderView = new LeaderView({  collection: window.App.data.teams });
    },
    render: function() {
        var teamsView  = window.App.views.teamsView;
        var dataView   = window.App.views.dataView;
        var leaderView = window.App.views.leaderView;
        this.$el.find('#basketball .app').prepend(teamsView.render().el);
        this.$el.find('#basketball .app').prepend(dataView.render().el);
        this.$el.prepend(leaderView.render().el);
    }
});

Then inside a controller I render the app view above.

This feels comfortable to me, but somewhere deep inside says it's wrong and I should be looking at layout views?

So my question more specifically is when putting the pieces together in an backbone application should I be looking into layout views or is creating a single app level view (like above) sufficient?

There is no such thing as a "Region View"... do you mean a Layout View? — Tyler

Tyler Tyler · Accepted Answer · 2014-05-03T22:34:26

What you're doing is fine at the simplest level, though perhaps more manual than it needs to be. However, you may want a Layout View as things get more complex.

The value of a Layout View comes when you have a region in your App that you'd like to have contain sub-regions, but only during certain views. For example, you might have an index/list inside of your App's #mainRegion that just has a bunch of teams, in which case you could use a CollectionView (or CompositeView if you want to add some styling) along with the ItemView for each team.

However, say you click to edit one of the teams, and now you want the #mainRegion to show the edit page, which itself has some information about the team in #infoRegion and then an edit form in a #formRegion. These are regions that are specific to the edit page, and so you'd want to use a Layout View to manage them rather than delegating all the way up to the App level.

I hope this makes sense, and I'm happy to clarify if needed. You can also check out the documentation for a breakdown of when to use each view type: https://github.com/marionettejs/backbone.marionette/wiki/Use-cases-for-the-different-views

How to determine if I should use a layout view Marionette?

1 Answers