javascript - backbone.js:防止 消失

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>

并在您的render 和refreshList 函数中定位tbody:

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 proxies Underscore functions on collections, _.each(this.model.models... 可以写成 this.model.each (this .collection.each 如果你应用上面的注释)