1

backbone.js を使い始めたばかりです。が呼び出されたListingListViewときに新しいコンテンツでテーブルを更新するビューがあります。fetch()

問題:このテーブルにはいくつかの<th>要素が含まれています。テーブルの内容の更新中に$(this.el).empty();andを実行すると、要素が削除されます。どうすればこれを防ぐことができますか? 要素は残したい。ありがとう！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>
4

1 に答える 1

3

theadandを使用して、テーブルに構造を追加できます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します。renderrefreshList

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最終的には少し明確になる可能性があります。
  • バックボーン プロキシ コレクションのアンダースコア関数は、次の_.each(this.model.models...ように記述できますthis.model.each(this.collection.each上記の注記を適用する場合)
于 2012-06-19T16:35:22.087 に答える