Backbone.js：表格未显示模板校正

Question

我有3个单独的模板，一个用于表头，另一个用于内容，第三个用于结束标记。 当我创建孔表并将其完全放入模板时，它看起来像这样：

但是，当我将其分为三个模板时，我得到以下信息：

该表永远不会正确地形成，并且表的主体似乎忽略了表头。 永不扩散。 如果我移除头部模板，身体剂量会改变。

这是代码：

AbsenceList.js

window.AbsenceListView = Backbone.View.extend({
    initialize: function() {
        this.template1 = _.template(tpl.get('tableEnd'));
        this.template2 = _.template(tpl.get('tableStart'));
        this.model.bind("reset", this.render, this);
        var self = this;
        this.model.bind("add", function(absence) {
            $(self.el).append(new AbsenceListItemView({
                model: absence
            }).render().el);
        });
    },
    render: function(eventName) {
        $(this.el).html(this.template2());
        _.each(this.model.models, function(absence) {
            $(this.el).append(new AbsenceListItemView({
                model: absence
            }).render().el);
        }, this);
        $(this.el).append(this.template1());
        return this;
    }
});
window.AbsenceListItemView = Backbone.View.extend({
    initialize: function() {
        this.template = _.template(tpl.get('absence-table_1'));
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },
    render: function(eventName) {
        $(this.el).append(this.template(this.model.toJSON()));
        return this;
    }
});

tableStart.html

<table class="table table-bordered table-striped" id="example-default">
            <thead>
              <tr>
                <th>Name</th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Fridays</th>
              </tr>
            </thead>
            <tbody>

TableEnd.html

 </tbody>
 </table>

AbsenceTable.html

<tr><td><a href='#student/<%= studentidStudent %>'>  <button>Link</button></a></td>

<td><% if (monday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (monday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (tuesday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (tuesday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (wednesday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (wednesday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (thursday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (thursday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>  
<td><% if (friday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (friday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>

</tr> 

桌子的主体与头部不对齐的原因是什么？

Answer 1

jQuery的append不是简单的文本串联。 如果提供字符串，它将将该字符串转换为一组DOM节点并插入这些节点。 如果给append一个包含无效HTML的字符串，则浏览器将尽力修复HTML，然后再将任何节点添加到DOM。

您要添加以下“ HTML”：

<table class="table table-bordered table-striped" id="example-default">
    <thead>
        ...
    </thead>
    <tbody>

但这不是有效的HTML，因此浏览器可能会将其转换为：

<table class="table table-bordered table-striped" id="example-default">
    <thead>
        ...
    </thead>
    <tbody>
    </tbody>
</table>

在它到达页面之前。 然后，您尝试通过AbsenceListItemView添加更多无效的内容（即不在<thead> ， <tbody>或<table>内的<tr> <table> ），因此浏览器将设法使之有意义。 最后，您尝试附加：

    </tbody>
</table>

浏览器可能会将其转换为：

<table>
    <tbody>
    </tbody>
</table>

最终导致一团混乱。

您需要将<table>视为一个单元。 将您的tableEnd和tableStart合并为有效的内容：

<table class="table table-bordered table-striped" id="example-default">
    <thead>
        ...
    </thead>
    <tbody>
    </tbody>
</table>

然后将AbsenceListItemView附加到其中的<tbody> ：

render: function (eventName) {
    this.$el.html(this.template()); // This has both pieces.
    this.collection.each(function(model) {
        this.$('tbody').append(new AbsenceListItemView({model: model}).render().el);
    }, this);
    return this;
}

注意其他一些变化：

1. 您的model实际上是一个集合，因此您应在视图内部使用this.collection而不是this.model ，并在实例化视图时说出new AbsenceListView({ collection: ... }) 。
2. 在视图内部使用this.$el ，而不是一遍$(this.el)调用$(this.el)来$(this.el)创建新的jQuery包装版本。 骨干为您创建了this.$el ，因此您应该使用它。
3. 使用this.$()在视图的el找到它，这是Backbone为您设置的this.$el.find(...)的快捷方式。
4. Backbone 将各种 this.collection.each(...) 方法混合到集合中，因此您可以说this.collection.each(...)而不是像_.each(this.collection.models, ...)这样_.each(this.collection.models, ...)集合的models属性。