Javascript backbone.js：防止<；th>；从消失

我刚刚开始使用backbone.js。我有一个视图

ListingListView

，它在调用

fetch（）

时用新内容刷新表

问题：此表包含一些

元素。如果我要做一个

$（this.el）.empty（）

和

this.render（）

在更新表内容期间，将删除

元素。我怎样才能防止这种情况？我希望保留

元素。谢谢

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();
    }
});

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

HTML代码

// 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();
    }
});

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

地址
床
洗澡
价格

您可以使用

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>

注:

• 别忘了，你可以使用一个集合作为一个特殊的选项，而不是一个模型：它最终可能会更清晰一些
• 主干代理在集合上的函数下划线，

  。\u1每个（this.model.models…

  可以写成

  this.model.each

  （

  this.collection.each

  ，如果应用上述注释）

---

不是很优雅，但您可以使用jquery将它们放在需要的地方。