Rendering subview inside view creates an extra div

Question

I have a backbone view, called container

ContainerView = Backbone.View.extend({
    template: _.template($('#containerTmpl').html()),
    //this.$el.append(subview.render().el);
}

Then there is a subview

PictureView = Backbone.View.extend({
    template: _.template($('#photoTmpl').html())
}

My templates look like this:

<script type="text/template" id="containerTmpl">
  <div id="container">
  </div>
</script>

<script type="text/template" id="photoTmpl">
  <div class="photo-container">
    <img src="<?- url ?>" alt="" />
  </div>
</script>

When this actually renders on the page I see one extra Div created and my structure looks like this:

<div id="container">
    <div>     <!--Where is this extra div coming from??? -->      
        <div class="photo-container">
            <img/>
        </div>
    </div>
</div>

Something like this http://stackoverflow.com/questions/11594961/backbone-not-this-el-wrapping ? — nikoshr, Apr 16 '13 at 20:32
See above comment for solution. The reason behind your extra `div` element is that Backbone will automatically create an element if you don't give it one when instantiating a view. The default type being a `div` element, you have an extra one. — Loamhoof, Apr 16 '13 at 20:35
can you please provide an example code so that I can accept it — sublime, Apr 16 '13 at 20:38

Pablo · Accepted Answer · 2013-04-16T23:46:44.260

You have to declare the tagName of each view, if you don't want it to save everything under a div element.

Sorry, i'll correct this. Should be like:

Something like:

Picture = Backbone.View.extend({
    template: _.template($('#photoTmpl').html()),
    tagName: 'div',
    className: 'photo-container'
});

And the template

<script type="text/template" id="photoTmpl">
    <img src="<?- url ?>" alt="" />
</script>

Hope it helps

Rendering subview inside view creates an extra div

1 Answers1