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

Question

Problem

Using a Backbone.Marrionette.Layout to present some tabular data. The portion of the table is a Backbone.Marionette.R

Answer 1

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.

Answer 2

Marionette 3 deprecated the CompositeView class. Instead, a region can now overwrite its el with the rendered contents of the inner View with the new replaceElement option.

See this example to render a table:

var RowView = Marionette.View.extend({
  tagName: 'tr',
  template: '#row-template'
});

var TableBody = Marionette.CollectionView.extend({
  tagName: 'tbody',
  childView: RowView
});

var TableView = Marionette.View.extend({
  tagName: 'table',
  className: 'table table-hover',
  template: '#table',

  regions: {
    body: {
      el: 'tbody',
      replaceElement: true
    }
  },

  onRender: function() {
    this.showChildView('body', new TableBody({
      collection: this.collection
    }));
  }
});

var list = new Backbone.Collection([
  {id: 1, text: 'My text'},
  {id: 2, text: 'Another Item'}
]);

var myTable = new TableView({
  collection: list
});

myTable.render();