I have a backbone.marionette application that is using a CollectionView to output the following:

Question

0

Editorial Team

Asked: June 17, 20262026-06-17T13:18:09+00:00 2026-06-17T13:18:09+00:00

I have a backbone.marionette application that is using a CollectionView to output the following:

0

I have a backbone.marionette application that is using a CollectionView to output the following:

div#main .widget
- div.head
- div.body

Here are the 2 sibling ItemViews:

var LogLocationBodyView = App.ItemView.extend({
    tagName: "div",
    attributes: {class: "body"},
    template: "#log-location-body-template"
});

var LogLocationHeadView = App.ItemView.extend({
    tagName: "div",
    attributes: {class: "head"},
    template: "#log-location-head-template" 
});

And here is the CollectionView:

var LogLocationsView = App.CollectionView.extend({
    template: "#log-locations-template",
    attributes: {id: "main", class: "widget"},
    itemView: LogLocationHeadView
});

I can obviously get LogLocationHeadView to render but I’m looking for the best approach to inserAfter() LogLocationBodyView, so that the 2 ItemViews are siblings.

What is the best way to pull this off? I’ve tried a number of different approaches. First I tried to use the onRender() of my ItemView, but quickly realized I could only append to the markup in the view. I really need to insertAfter() and parent is unavailable since within onRender we are still pre-DOM insertion.

var LogLocationHeadView = App.ItemView.extend({
    tagName: "div",
    attributes: {class: "head"},
    template: "#log-location-head-template",
    onRender: function() {

        // create a new piece of html from a different template
        var view = new LogLocationBodyView({
            model: this.model
        });

        view.render();

        $(this.el).append(view.el);

        var c = $(this.el).children();
            console.log(c); // true

        var p = $(this.el).parents();
            console.log(p); //undefined

    }

I also understand I can override the appendHTML() and renderItem() methods within CollectionViews, but I need to still be able to append(). So I would need to be able to pass a renderType.

What I really would like to do is pass an array of ItemViews along with a renderType to renderItem. Then, renderItems could fork within appendHTML().

var LogLocationsView = App.CollectionView.extend({
    template: "#log-locations-template",
    attributes: {id: "main", class: "widget"},
    itemViews: [{view: LogLocationHeadView, renderType: append}, {view: LogLocationBodyView, renderType: insertAfter}]
});

Before I try to do that, Id like to see if I am completely off base here. Is there a better way to do this?