Backbone Composite View Notes

views.html

<div class="foo">
  {{view "views/user/user-badge" resource_id=user.id}}
  <view data-id="123"></view>
</div>

<script type="text/javascript">
  // Then we find the placeholders and replace those elements with the subview’s element which it automatically creates for itself. In essence, the code does this:

  parentView.$('view').each(function () {
    var id = this.getAttribute('data-id'),
        attrs = theTemporaryObject[id], // Hash of Views
        SubView = attrs.ViewClass,      // SubView
        subView = new SubView(attrs);
    subView.render(); // repeat the process again
    $(this).replaceWith(subView.el);
  });

  /*
    Subviews are rendered via an event
  */

  var tableView = Backbone.View({
    render: function(){
      this.$el.html( JST["table_view_template"], this )
      this.trigger("rendered")
    },
    tableRow: function(person){
      // Functions being called in the template
      new TableRowView({
        parentView: this,
        model: person
      }).toHTML()
    }
  })

</script>
<!-- 

%table.table-bordered
  %thead
    %tr
      %th First Name
      %th Last Name
  %tbody
    - for person in @collection.models
      = @tableRow(person)

-->

<div class="event-panel">
  {{ text_field "main_email_contact" }}
  <view data-template="text_field" data-attr="main_email_contact">
</div>

<script type="text/javascript">
  var tableView = Backbone.View({
    render: function(){
      this.$el.html( JST["table_view_template"], this )

      this.$('.view').each(function(){

        var subview = new Subview(id)
      })

      initializeSubViews( function(){
        this.trigger("rendered")
      })
    },

  });
</script>