Problem
Using a Backbone.Marrionette.Layout to present some tabular data. The <tbody>
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 <tbody>
element.
Example Code
The Layout
looks like this:
Backbone.Marionette.Layout.extend({
template:...
regions:{
list_region: '#list-region'
}
onRender:function(){
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>?
this.list_region.show(collectionView);
});
The template for the Layout comprises the entire table:
<table>
<tbody id='list-region'>
</tbody>
<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.
</tfoot>
</table>
Any suggestions?
Is the intent of this layout solely to facilitate a table? If so, you should look at using a CompositeView instead.
That's pretty much it. This will render all of your itemViews in to the tbody.
Marionette 3 deprecated the
CompositeView
class. Instead, a region can now overwrite itsel
with the rendered contents of the inner View with the newreplaceElement
option.See this example to render a table: