Template View with Dynamic Children in Sproutcore 2.0

add_child_view.js

(function() {

  // Essentially function(name = "SC.View", options = {data: {}, hash: {}})
  var parseHelperArguments = function(viewClassNameOrOptions, options) {
    var viewClass;
    if (_.isString(viewClassNameOrOptions)) {
      viewClass = SC.getPath(viewClassNameOrOptions);
      sc_assert( "Could not find view class %@".fmt(viewClassNameOrOptions), viewClass != null );
      options = options || {};
    } else {
      viewClass = SC.View;
      options = viewClassNameOrOptions || {};
    }

    options.data = options.data || {};
    options.hash = options.hash || {};
    return [viewClass, options];
  };

  var addChildView = function() {
    var parsedArguments = parseHelperArguments.apply(this, arguments),
        viewClass = parsedArguments[0],
        options = parsedArguments[1],
        parentView = options.data.view,
        childViewClass,
        childView;

    sc_assert( "childView can only be used inside of a TemplateContainerView", TemplateContainerView.detect(parentView) );

    childViewClass = SC.Handlebars.ViewHelper.viewClassFromHTMLOptions(viewClass, options.hash, this);
    childView = parentView.createChildView(childViewClass, {
      template: options.fn
    });

    parentView.get('childViews').pushObject(childView);
  };

  Handlebars.registerHelper('childView', addChildView);

}());

appendable_view.js

// ## AppendableView
// The view that is initially rendered via template, but to
// which it is possible to add additional child views.
TemplateContainerView = SC.ContainerView.extend({
  render: function(buffer) {
    if (this.get('template') && !this.get('_renderedFromTemplate')) {
      this.set('_renderedFromTemplate', true);
      return SC.View.prototype.render.apply(this, arguments);
    }
    return this._super.apply(this, arguments);
  }
});

AppendableTemplateView = TemplateContainerView.extend({
  addSection: function(name, markup) {
    var view = SC.View.create({
      parentView: this,
      name: name,
      template: SC.Handlebars.compile(markup)
    });

    this.get('childViews').pushObject(view);

    return view;
  }
});

usage.html.erb

{{#view AppendableTemplateView}}

  {{#childView tagName="section" class="main pane user_list}}
    ...
  {{/childView}}

  {{#childView SomeViewClass contentBinding="Foo.bar" classBinding="content.baz"}}
    ...
  {{/childView}}

{{/view}}