Turning off div wrap for Backbone.Marionette.ItemView

Question

I\'m looking at the Angry Cats Backbone/Marionette tutorial posts here

http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/

http://dav

Answer 1

2014/02/18 — updated to accommodate the improvements noted by @vaughan and @Thom-Nichols in the comments

---

In many of my itemView/layouts I do this:

var Layout = Backbone.Marionette.Layout.extend({

    ...

    onRender: function () {
        // Get rid of that pesky wrapping-div.
        // Assumes 1 child element present in template.
        this.$el = this.$el.children();
        // Unwrap the element to prevent infinitely 
        // nesting elements during re-render.
        this.$el.unwrap();
        this.setElement(this.$el);
    }

    ...

});

The above code only works when the wrapper div contains a single element, which is how I design my templates.

In your case .children() will return , so this should work perfect.

I agree, it does keep the templates much cleaner.

One thing to note:

This technique does not force only 1 child element. It blindly grabs .children() so if you've incorrectly built the template to return more than one element, like the first template example with 3 elements, it won't work well.

It requires your template to return a single element, as you have in the second template with the root element.

Of course it could be written to test for this if need be.

---

Here is a working example for the curious: http://codepen.io/somethingkindawierd/pen/txnpE