Backbone Top Down Render

top-down-render.js

/*

# Top down render

To prevent issues where you get errors trying to
render because your element needs to be attached to the
DOM and visible in order to manipulate without errors,
it is possible to always use a top-down rendering approach.

There are two ways to do it: The parent view can render the
child's .el and pass it in, or the child can create it's own
el, and the parent simply calls childView.make() and appends
the result to the DOM before calling childView.render().

*/

    var ChildView = Backbone.View.extend({
        tagName: 'li',
        className: 'item'
      }),

      ParentView = Backbone.View.extend({
        tagName: 'ul',
        render: function () {
          var childView = new ChildView();

          // Create the element without calling render.
          childView.make();

          // Now attach to DOM. Note that ParentView's .el
          // should already be attached to the DOM by now via
          // parent.
          this.$el.append(childView.el);
          childView.render();
        }
      }),

      parentView = new ParentView();

    parentView.make();
    // parentView.el == '<ul></ul>'

    parentView.render();
    // parentView.el == '<ul><li class="item"></li></ul>'