CODEWITHSUNDEEP
backbone.jsbackbone-layout-manager
Domenic
Domenic

Reputation: 112827

Can I stop Backbone LayoutManager from generating extra <div>s?

Given these templates:

<script id="template1" type="layout">
    Template 1 contents
</script>

<script id="template2 type="layout">
   Template 2 contents
   <section class="subview"></section>
</script>

And this view setup:

var View1 = Backbone.LayoutView.extend({
    template: "#template1"
});

var View2 = Backbone.LayoutView.extend({
    template: "#template2",
    views: {
        ".subview": new View1();
    }
});

I get this output:

Template 2 contents
<section class="subview"><div>Template 1 contents</div></section>

How can I instead get this output?

Template 2 contents
<section class="subview">Template 1 contents</section>

Upvotes: 1

Views: 781

Answers (2)

Julian Boyce
Julian Boyce

Reputation: 741

If template1 had the contents:

<div class="myContents"></div>

then you may use jQuery's unwrap() to remove the element in backbone layout managers afterRender() function

afterRender: function() {
    this.getView('.subView').$el.find('.myContents').unwrap();        
},

Upvotes: 0

TYRONEMICHAEL
TYRONEMICHAEL

Reputation: 4244

I would use the following in your template keeping template 1's template the same:

<script id="template2 type="layout">
    Template 2 contents
</script>

Then in your view

var View2 = Backbone.LayoutView.extend({
    template: "#template2",
    beforeRender: function() {
        this.insertView(new View1());
    }
});

var View1 = Backbone.LayoutView.extend({
    template: "#template1",
    tagName: "section",
    className: "subview"
});

This would give you the following

<div>
   Template 2 contents
   <section class="subview">Template 1 contents</section>
</div>

I have found no other way of removing the 'div' unless by specifying a tagName attribute.

Upvotes: 3

Related Questions