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.

+3


source to share


1 answer


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.

+3


source







All Articles