Underscore.js templates in backbone.js adding divs around tr

Question

I use the templates features for underscore.js from backbone.js, I have the following template, which I define on my page as follows:

<script type="text/template" id="businessunit_template">
  <tr data-uid="{{Uid}}">
    <td class="first"><span>{{Name}}</span></td>
    <td class="{{StatusClass}} tac">{{OverallScore}}%</td>
    <td>
        <a class="impactanalysis individualBu" href="#"> </a>
    </td>
  </tr>
</script>

I am attaching trs to the tbody element of the following table:

<table class="listing">
  <thead>
    <tr>          
      <th class="first">Business Units</th>
      <th>BCMS<br />Status</th>
      <th>View</th>
    </tr>
  </thead>
  <tbody id="reportBusinessUnits"></tbody>
</table>

My individual view of the frame that tr displays is as follows:

class ReportBusinessUnitView extends MIBaseView
  initialize: (options) ->
    @vent = options.vent
    @template = _.template($('#businessunit_template').html())

  events:
    "click .individualBu": "showBusinessUnitDetail"

  showBusinessUnitDetail: (e) =>
    e.preventDefault()    
    self = @   

    @vent.trigger('management:showbusinessunitdeail', @model)

  render: =>
    $(@el).html(@template(@model.toJSON()))
    @

The problem is that the processed output has a div around tr, and I have no idea where it comes from:

<div>
  <tr data-uid="a5e3c218-1ca4-4806-b27e-24a25ed83ab6">
    <td class="first"><span>Central Networks</span></td>
    <td class="red tac">4%</td>
    <td>
        <a class="impactanalysis individualBu" href="#"> </a>
    </td>
  </tr>
</div>

I just don't see what I'm doing wrong. Does anyone know where this might be from?

Answer 1

DOM, , .el View . breakpoint/debugger ReportBusinessUnitView.render() this.el. (View.el docs).

, :

• .el? (, MIBaseView)
• DOM node?

, Backbone auto DIV node , .

Answer 2

DIV , , . , . , . , HTML, , .

, .el HTML node ( DIV ). HTML, !