Chris Dutrow Chris Dutrow - 8 months ago 38
Javascript Question

Specify an HTML table's <tbody> element as a region in Marionette for Backbone.js


Using a Backbone.Marrionette.Layout to present some tabular data. The

portion of the table is a Backbone.Marionette.Region that is meant to display a Backbone.Marionette.CollectionView.

I can not figure out how to do this using Marionette's "Regions" without messing up the table display by inserting an extra HTML element inside the

Example Code

looks like this:

list_region: '#list-region'
var collection = new TheCollection()
var collectionView = new TheCollectionView({
collection: collection
// PROBLEM: The region seems to needs its own HTML element,
// and the CollectionView also seems to need its on HTML
// element, but as far as I can see, there is only room
// for one element: <tbody>?;

The template for the Layout comprises the entire table:


<tbody id='list-region'>


<tfoot id='footer-region'>
Some other stuff goes here that is not a collection, so I was able
to make the View's 'tagName' property 'tr', which worked fine.


Any suggestions?


Is the intent of this layout solely to facilitate a table? If so, you should look at using a CompositeView instead.

RowView = Marionette.ItemView.extend({
  tagName: "tr",
  template: ...

TableView = Marionette.CompositeView.extend({
  template: ...,

  childView: RowView,

  childViewContainer: "#list-region"

That's pretty much it. This will render all of your itemViews in to the tbody.