Question

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

enter image description here

但是当我将它分成三个模板时，我得到以下内容：

enter image description here

表格从未正确形成，表格的主体似乎忽略了表格的头部。永远不会扩散如果我移除头部模板，身体剂量会发生变化。

以下是代码：

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的字符串，那么浏览器会在将任何节点添加到DOM之前尽力修复HTML。

您正在添加此“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（即不在<tr>，<thead>或<tbody>内的<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;
}

请注意其他一些变化：

您的model实际上是一个集合，因此您应该在视图中使用this.collection而不是this.model，并在实例化视图时说new AbsenceListView({ collection: ... })。
在视图中使用this.$el，而不是一遍又一遍地调用$(this.el)来创建新的jQuery包装版本。 Backbone会为您创建this.$el，因此您应该使用它。
使用this.$()在您的视图el中找到此内容，这是Backbone为您设置的this.$el.find(...)的快捷方式。
Backbone mixes various Underscore methods into collections因此您可以说this.collection.each(...)而不是使用models之类的内容来处理集合的_.each(this.collection.models, ...)属性。

Backbone.js：表没有使用模板进行更正

1 个答案: