在backbone.js中的Underscore.js模板在tr周围添加一个div

Question

我正在使用 backscore.js 来自backbone.js的模板功能，我在页面中定义了以下模板，如下所示：

<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>

我将 trs 附加到下表的 tbody 元素：

<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>

我呈现 tr 的个人主干视图看起来像这个：

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()))
    @

问题是，渲染的输出在 tr 周围有一个 div，我不知道它来自哪里：

<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>

我只是看不到我做错了什么。有人知道这可能来自哪里吗？

Answer 1

这看起来非常像当您没有在 View 中正确声明 .el 属性时得到的错误 DOM 片段。我会在 ReportBusinessUnitView.render() 中放置一个断点/debugger 语句，并从那里检查 this.el 属性的值。 （View.el 文档）。

另外，检查您的代码：

• 您是否声明了 .el 属性？ （例如在 MIBaseView 中）
• 它是否命中了正确的 DOM 节点？

如果没有，Backbone 会自动为您创建 DIV 节点，这可能会令人困惑。

Answer 2

我相信，在模板周围包含默认的 DIV 标签是一种安全措施。这给出了视图事件所附加的父标签。这样事件传播就会按预期进行。同样，如果您丢弃视图并删除插入的 HTML，所有事件都会随之发生，从而允许垃圾收集器完成其工作。

我最近有相当大的悲伤，因为我将 .el 设置为静态 HTML 父节点（为了防止添加默认 DIV）。因为即使在我的动态 HTML 被替换之后它仍然存在，事件仍然围绕着响应操作并造成普遍的混乱！