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