Introduction to Marionette.js – The Backbone Framework/

...

/

Building a CompositeView

Building a CompositeView

Learn how to create tables in Marionette using CompositeView.

We'll cover the following...

Now that we’ve done some house cleaning in our codebase, let’s display our contacts within a table. We already have our contacts in a collection, so we simply need to render a tr DOM element for each one of them.

Creating a template for a table row

Let’s modify the contact template to make it generate the contents for a table row:

Press + to interact
<script type="text/template" id="contact-list-item"> 
    <td><%- firstName %></td><td><%- lastName %></td>
</script>

We need our table row to be wrapped within a tr tag, so let’s modify line 2 in the Contact view:

Press + to interact
List.Contact = Marionette.ItemView.extend({
  tagName: "tr",
  template: "#contact-list-item",
  
  // event-handling code is here
});

Lastly, we need our Contacts view to be contained within a table instead of the current ul tag. Let’s edit line 2 to change the tag:

Press + to interact
List.Contacts = Marionette.CollectionView.extend({
  tagName: "table",
  className: "table table-hover",
  childView: List.Contact
});

In the code ...