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

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.