Question

我正在使用来自backbone.js的underscore.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

这看起来非常类似于在未正确声明.el中的View属性时获得的错误DOM片段。我在debugger中放了一个断点/ ReportBusinessUnitView.render()语句，并从那里检查this.el属性的值。（View.el docs）。

另外，请检查您的代码：

您是否申报了.el财产？（例如MIBaseView）
它是否击中了正确的DOM节点？

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

Answer 2

我认为，包含默认DIV标签以包围模板是一种安全措施。这给出了视图事件附加到的父标记。这样事件传播将按预期工作。同样，如果你放弃一个视图并删除插入的HTML，所有事件都会随之而来，让垃圾收集器完成它的工作。

我最近有相当的悲痛，因为我将.el设置为静态HTML父节点（为了防止添加默认DIV）。因为它在我的动态HTML被替换之后仍然存在，所以事件仍在响应行动并造成一般混乱！

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

2 个答案: