backbone.js collection view example using marionet

Question

Can you please suggest me some example for showing list view through marionette template system. Basically, I have a marionette template and based on the template i am creating a table list.

Answer 1

To create a list of table rows with Backbone Marionette you'll need to define five things:

• A model for each row
• A collection to hold all the row models
• A CollectionView to iterate through the collection
• An ItemView to provide row-specific functionality
• A template for the ItemView that provides the markup for each row

Sample Use Case

Say you have the following data:

var stooges = [{ name: 'moe', age: 44, userid: 1}, 
               { name: 'larry', age: 44, userid: 2}, 
               { name: 'curly', age: 44, userid: 3}];

Define a model and collection

For the following data you'd want to have a model:

var StoogeModel = Backbone.Model.extend({});

where you can set up some sensible defaults for your data and other properties, like idAttribute. There are plenty of references on how to customize your model. Your collection should, at minimum, take the stoogeModel.

var StoogeCollection = Backbone.Collection.extend({
  model: StoogeModel
});

Set up your views

To iterate and render your collection into a table, all you'll need is a CollectionView and an ItemView.

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName: "table",
  childView: StoogeItemView
});

All CollectionViews need at minimum a childView which is an ItemView (which we define below) that they will use to derive the functionality to create the html for each row, and a collection which is the collection holding the models that populate each row. We'll pass this collection in when we instatiate astoogesCollectionView. The tagName property tells Backbone to encapsulate the children in a table tag.

var StoogeItemView = Backbone.Marionette.ItemView.extend({
  tagName: "tr",
  template: '#stooge-template'
});

<script type="text/template" id="stooge-template">
  <td id="name"><%= name %></td>
  <td id="age"><%= age%></td>
  <td id="userid"><%= userid%></td>
</script>

All ItemViews require a template which we define in our HTML document, here it's #stooge-template. If the ItemView is a child of a collection you don't have to define its model, it will be provided by the parent CollectionView. The HTML rendered by each child StoogeItemView will be encapsulated by tr tags, because what we want is a row for each child of the collection view.

From the ItemView you can handle events at the "row" level, like click or focus on a row column. You can also handle changes to the model that was passed in. Additionally, from the ItemView you could decide to pass in helpers that can manipulate the way data is displayed in its template.

Putting it all together

Now we have defined our model, collection, collection view, child item view, and the item view template. Next, we'll connect all these pieces.

Populate your collection

You pass in the array of stooges to the constructor of your collection.

var myStooges = new StoogeCollection(stooges);

These are shaped into models, and they load your collection.

Rev up your CollectionView

You pass your loaded collection to your collection view.

var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

Render your view

All Marionette views come packaged with a render method. In our case, invoking

myStoogesView.render();

will create a <table> with three <tr> elements each with a column each for the name, age, and userid fields in our dataset. To insert the resulting HTML in the DOM we simply use the view's el property. For simplicty, we can inject the view straight into the body

document.body.appendChild(myStoogesView.el);

or using jQuery:

$(document.body).append(myStoogesView.el);

Beyond this example

There is much functionality that we didn't even begin to discuss. Read the docs! And check out the many many tutorials. Hope this brief intro helps!