Correct way to add multiple backbone views to a parent view

Question

I have multiple backbone views that make up a screen, currently I am doing it like this:

render : function() {
    this.$el.html(this.template());

    this.view2 = new View2();
    this.view2.render();
    this.$el.append(this.view2.$el);

    ... more views added here as necessary
}

Is this the correct way to handle multiple views or is there a better way to attach views to the current view?

I want to be able to destory and recreate a view with the relevant HTML getting removed/added from the parent view without having to manually do it.

possible duplicate of [How to render and append sub-views in Backbone.js](http://stackoverflow.com/questions/9271507/how-to-render-and-append-sub-views-in-backbone-js) — Puigcerber, Feb 17 '14 at 12:12

score 1 · Answer 1 · answered Feb 17 '14 at 11:55

To be honest, i really recommend you to checkout Marionette features. I had an experience building large scale app with backbone, and can say it real magic wand in developments. It helps you avoid memory leaks working with views and make you code more compact and clear decreasing boilerplate code.

So in your case you can get Layout View, create regions and render views in regions.

var Layout = Marionette.Layout.extend({
    regions: {
        head: "#head",
        main: "#main"
    }
});

var layout = new Layout();
layout.render();

layout.main.show(new SomeView());

Correct way to add multiple backbone views to a parent view

1 Answers1