Question

我刚开始使用backbone.js。我有一个视图ListingListView，可以在调用fetch()时刷新包含新内容的表格。

问题：此表包含一些<th>个元素。如果我在更新表格内容期间执行$(this.el).empty();和this.render()，则会删除<th>元素。我怎么能阻止这个？我希望保留<th>个元素。谢谢！

JS代码

// Views

window.ListingListView = Backbone.View.extend({
    el: '#listing_list table',

    initialize: function() {
        this.model.bind('reset', this.refreshList, this);
        this.model.bind('add', function(listing) {
            $(this.el).append(new ListingListItemView({ model: listing }).render().el);
        }, this);
    },

    render: function() {
        _.each(this.model.models, function(listing) {
            $(this.el).append(new ListingListItemView({ model: listing }).render().el);
        }, this);
        return this;
    },

    close: function() {
        $(this.el).unbind();
        $(this.el).empty();
    },

    refreshList: function() {
        $(this.el).empty();
        this.render();
    }
});

HTML代码

<div id="listing_list">
    <table class="table table-bordered table table-striped">
        <th>Address</th>
        <th>Beds</th>
        <th>Baths</th>
        <th>Price</th>
    </table>
</div>

Answer 1

您可以使用thead和tbody：

为表格添加一些结构

<div id="listing_list">
    <table class="table table-bordered table table-striped">
    <thead>
    <tr>
        <th>Address</th>
        <th>Beds</th>
        <th>Baths</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody>

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

定位tbody和render函数中的refreshList：

render: function() {
        var $tbody=this.$("tbody"); // or $(this.el).find("tbody")

        _.each(this.model.models, function(listing) {
               $tbody.append(new ListingListItemView({ model: listing }).render().el);
        }, this);

        return this;
},

refreshList: function() {
    this.$("tbody").empty();
    // or $(this.el).find("tbody").empty() if you prefer
    this.render();
}

注意：

不要忘记您可以将集合用作特殊选项而不是模型：http://backbonejs.org/#View-constructor最终可能会更清晰。
Backbone代理集合上的下划线函数_.each(this.model.models...可以写成this.model.each（this.collection.each如果您应用上述注释）

backbone.js：防止消失

1 个答案: