How to handle initializing and rendering subviews in Backbone.js?

Question

I have three different ways to initialize and render a view and its subviews, and each one of them has different problems. I\'m curious to know if there is a better way that

Answer 1

What I do is giving each children an identity (which Backbone has already done that for you: cid)

When Container does the rendering, using the 'cid' and 'tagName' generate a placeholder for every child, so in template the children has no idea about where it will be put by the Container.

<tagName id='cid'></tagName>

than you can using

Container.render()
Child.render();
this.$('#'+cid).replaceWith(child.$el);
// the rapalceWith in jquery will detach the element 
// from the dom first, so we need re-delegateEvents here
child.delegateEvents();

no specified placeholder is needed, and Container only generate the placeholder rather than the children's DOM structure. Cotainer and Children are still generating own DOM elements and only once.

Answer 2

I'm trying to avoid coupling between views like these. There are two ways I usually do:

Use a router

Basically, you let your router function initialize parent and child view. So the view has no knowledge of each other, but the router handles it all.

Passing the same el to both views

this.parent = new Parent({el: $('.container-placeholder')});
this.child = new Child({el: $('.container-placeholder')});

Both have knowledge of the same DOM, and you can order them anyway you want.

Answer 3

Kevin Peel gives a great answer - here's my tl;dr version:

initialize : function () {

    //parent init stuff

    this.render(); //ANSWER: RENDER THE PARENT BEFORE INITIALIZING THE CHILD!!

    this.child = new Child();
},

Answer 4

I'm not sure if this directly answers your question, but I think it's relevant:

http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

The context in which I set up this article is different, of course, but I think the two solutions I offer, along with the pros and cons of each, should get you moving in the right direction.

Answer 5

To me it does not seem like the worst idea in the world to differentiate between the intital setup and subsequent setups of your views via some sort of flag. To make this clean and easy the flag should be added to your very own View which should extend the Backbone (Base) View.

Same as Derick I am not completely sure if this directly answers your question but I think it might be at least worth mentioning in this context.

Also see: Use of an Eventbus in Backbone

Answer 6

Here is a light weight mixin for creating and rendering subviews, which I think addresses all the issues in this thread:

https://github.com/rotundasoftware/backbone.subviews

The approach taken by this plug is create and render subviews after the first time the parent view is rendered. Then, on subsequent renders of the parent view, $.detach the subview elements, re-render the parent, then insert the subview elements in the appropriate places and re-render them. This way subviews objects are reused on subsequent renders, and there is no need to re-delegate events.

Note that the case of a collection view (where each model in the collection is represented with one subview) is quite different and merits its own discussion / solution I think. Best general solution I am aware of to that case is the CollectionView in Marionette.

EDIT: For the collection view case, you may also want to check out this more UI focused implementation, if you need selection of models based on clicks and / or dragging and dropping for reordering.