1

setInterval呼び出し (コレクション内)に呼び出しを追加していますがfetch、意図しない副作用が発生しました。コレクションを呼び出しているビューは次のとおりです。

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/tablesCollection',
    'views/tableView'
],
function($, _, Backbone, tableModel, tablesCollection, tableView) {
    var tablesView = Backbone.View.extend({
        tagName: 'div',
        initialize: function(options) {
            this.collection.on('reset', this.render, this);
            this.template = this.options.template;
            this.url = this.options.url;
        },
        render: function() {
            this.collection.each(this.addOne, this);
            return this;
        },
        addOne: function(model) {
            var TableView = new tableView({ model: model, template: this.template, url: this.url });
            $(this.$el).append(TableView.render().el);
            return this;
        }
    });

    return tablesView;
});

ご覧のとおり、このビューはコレクションを反復処理し、各リードを DOM に追加します。これが私が望んでいることです。しかし、setIntervalそれを呼び出すと、コレクションがフェッチされるたびにこれが行われます。これは私が望んでいるものですがappend、アイテムが既にDOMにあるかどうかを確認するために、の前に行を追加したいと考えています。model.get('id')おそらく使用してDOMと比較できると思いました。これは最善のアプローチですか？もしそうなら、どうすればいいですか？

4

1 に答える 1

0

このタイプのものの基本/ナイーブパターンは、次のパターンに従うレンダリングメソッドを持つことです。

render: function() {
    this.$el.empty()
    this.collection.each(this.addOne, this);
    return this;
}

そうしないと、お気づきのように、DOMとコレクションが同期しなくなります。100ミリ秒ごとにコレクションを再フェッチしたり、5000モデルをレンダリングしたりするなど、非常に激しいことをしている場合（これもおそらくお勧めできません）、はるかに洗練されたアプローチが必要になる場合がありますが、これらはアプローチが間違っているというコードの臭いです。リアルタイムで何かが必要な場合は、socket.ioとpub/subを確認してください。setIntervalを使用してサーバーのポーリングを行う場合は、KISSを実行してビューを空にし、すべてを再レンダリングします。

質問したので、手動（および壊れやすい）チェックで再レンダリングを回避する必要がある場合data-id="<%= model.id %>"は、モデルビューの最も外側のタグに属性を配置し、this.$('[data-id=' + model.id + ']').lengthそれがすでにDOMにあるかどうかを確認します。

于 2013-03-12T21:55:40.210 に答える