Underscore.js templates in backbone.js adding a div around a tr

Question

I am using underscore.js's templating capabilities from backbone.js, I have the following template that I define in my page like this:

<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 the trs to the tbody element of 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 backbone view that renders the tr looks like this:

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, the rendered output has a div around the tr and I have no idea where it is coming 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 cannot see what I am doing wrong. Has anybody any idea where this could be coming from?

You might want to look at http://stackoverflow.com/a/10329499/441108 which will allow you to keep the `` in your template; this makes it easier to set things like the `data-uid` attribute on it. — Richard Barnett, Sep 06 '12 at 01:32

score 7 · Accepted Answer · answered Nov 14 '11 at 11:22

7

That looks very much like the kind of faulty DOM fragment you get when you haven't declared the .el attribute in a View correctly. I'd put a breakpoint/debugger statement in ReportBusinessUnitView.render() and inspect the value of the this.el attribute from there. (View.el docs).

Also, check your code:

Have you declared an .el property? (in MIBaseView for example)
Does it hit the right DOM node?

If not, Backbone auto creates the DIV node for you, which can be confusing.

answered Nov 14 '11 at 11:22

Jacob Oscarson

6,363
1
36
46

1

Thanks a million, I thought I was going mad. If I add the tagName: "tr" to the view and remove the enclosing from the template then all is good. – dagda1 Nov 15 '11 at 10:30

score 0 · Answer 2 · answered Feb 19 '13 at 17:19

The inclusion of a default DIV tag to surround the template is, I believe, a safety measure. This gives a parent tag to which the view's events are attached. That way event propagation will work as expected. As well, if you discard a view and remove the inserted HTML all events will go with it allowing the garbage collector to do its job.

I recently had considerable grief because I set the .el to the static HTML parent node (in order to prevent the default DIV from being added). Since it remained even after my dynamic HTML was replaced the events were still around responding to actions and creating general chaos!

Underscore.js templates in backbone.js adding a div around a tr

2 Answers2