Question

可能重复：
Backbone js: How to remove extra tag in view?

为什么每当我向HTML元素添加新的主干视图时，它会自动用<div> </div>围绕此视图？

例如，我的HTML页面中有一个表格

<table class="table table-hover">

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

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

</table>

现在在我的骨干控制器中，我执行以下操作

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

并在实际视图的HTML模板中

tblview.html

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

现在，当我在浏览器中查看此内容并检查html元素时，它呈现如下：

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

因此变得一团糟吗？我该如何解决这个问题？我希望它在表格中没有这些额外的<div> </div>来呈现视图。

Answer 1

Backbone自动创建div以包围任何视图。要覆盖默认值，您需要在扩展视图时设置tagName属性。 http://backbonejs.org/#View-extend

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

Answer 2

您的模板不需要包含tr标记。 tblView应tagName设置为tr。

骨干js附加视图

2 个答案: