Backbone.js 和 setInterval：如何检查 DOM 中是否已经存在某些内容

Question

我在我的fetch 调用（在我的收藏中）中添加了对setInterval 的调用，它产生了意想不到的副作用。这是调用集合的视图：

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 进行比较。这是最好的方法吗？如果是这样，我该怎么做？

Answer 1

这类事物的基本/朴素模式是遵循这种模式的渲染方法：

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