Marionette: How to add LayoutView as row to CompositView table?
I am building a table with Backbone.js and Marionette.js. My collection of models creates rows in a table that are inserted into <tbody>
.
I want to add a single row at the top of the table that is not part of my collection. This is previously defined LayoutView
.
Usually I just add another region, but since I am working with a table, I cannot add an additional one div
in tbody
as the table spits it out of the table as it is not <tr>
within <tbody>
.
Below is my attempt at plotting this in my onShow
CompositView function:
var SetAllTargets = Backbone.Marionette.LayoutView.extend({
template: JST["common/cubes/table/set-all-rows"],
tagName: "tr",
className: "set-all-targets"
});
App.Table = Marionette.CompositeView.extend({
template: JST["common/targets/layout"],
className: "targets",
childView: RowTarget,
childViewContainer: "tbody",
regions: {
targetsRegion: ".targets-region"
},
onShow: function() {
var setAllTargetsRow = new SetAllTargets();
var setAllTargetsRegion = "<tr class='target set-all-targets'></tr>";
this.$el.find("tbody").prepend(setAllTargetsRegion);
this.$el.find(".set-all-targets").show(setAllTargetsRow);
}
)};
Another attempt was to deliver
<tr class='target set-all-targets'> ...child elements here </tr>
to the template and attach view.el
to my function onShow
like this:
onShow: function() {
var setAllTargetsRow = new SetAllTargets();
this.$el.find("tbody").prepend(setAllTargetsRow.el);
}
But this only results in the html being <tr class='target set-all-targets'></tr>
placed at the top of the table, but none of the children.
source to share
You can use a method CollectionView.addChild
on your composite to insert something before displaying your collection:
onBeforeRenderCollection: function() {
this.addChild(null, <View>, 0);
}
See this fiddle for an example in action.
source to share