backbone js append view

Question

Possible Duplicate:
Backbone js: How to remove extra tag in view?

How come whenever I append a new backbone view to an HTML element, it automatically surrounds this view with a <div> </div>?

For example I have a table in my HTML page

<table class="table table-hover">

    <thead>
        <tr>
        <th>Column1</th>
        <th>Column2</th>
        </tr>
    </thead>

    <tbody id="tbl">    
    </tbody>

</table>

Now in my backbone controller, I perform the following

$("#tbl").append(new tblview().render().el);

and in the actual view's HTML template I have

tblview.html

<tr>
    <td>entry3</td>
    <td>entry4</td>
</tr>

Now when i look at this in the browser, and inspect the html element.. it renders like this:

<table class="table table-hover">

    <thead>
        <tr>
        <th>Column1</th>
        <th>Column2</th>
        </tr>
    </thead>

    <tbody id="tbl">
        <div>
              <tr>
                <td>entry3</td>
                <td>entry4</td>
              </tr>

        </div>  
    </tbody>

</table>

and thus is becomes all out of line? How can I fix this issue?? I want it to render the view without these extra <div> </div> in the table.

also http://stackoverflow.com/questions/9982785/when-extending-a-backbone-view-is-there-a-way-to-not-render-a-tagname — Derick Bailey, Dec 19 '12 at 02:18
and http://stackoverflow.com/questions/11195242/extra-wrappers-in-backbone-and-marionette — Derick Bailey, Dec 19 '12 at 02:19
this one too http://stackoverflow.com/questions/13601966/how-to-avoid-template-wrapping-with-empty-div-in-backbone — Derick Bailey, Dec 19 '12 at 02:19
http://stackoverflow.com/questions/7894253/backbone-js-turning-off-wrap-by-div-in-render ... i could go on for a while :P — Derick Bailey, Dec 19 '12 at 02:20

score 2 · Answer 1 · answered Dec 19 '12 at 01:14

2

Backbone automatically create a div to surround any view. To overwritte the default, you need to set the tagName attribute when you extend a view. http://backbonejs.org/#View-extend

Backbone.View.extend({
  tagName: "tr"
});

answered Dec 19 '12 at 01:14

Simon Boudrias

42,953
16
99
134

1

Not yet, but I'm happy this helped you out! – Simon Boudrias Dec 19 '12 at 01:17

score 0 · Answer 2 · answered Dec 19 '12 at 01:14

0

Your template doesn't need to include the tr tags. tblView should have tagName set to tr.

answered Dec 19 '12 at 01:14

Daniel A. White

187,200
47
362
445

thanks, fixed my issue straight away:] mymy how have i been using backbone for last 1 year and not known this... – Tyler Evans Dec 19 '12 at 01:17

backbone js append view

2 Answers2