Question

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

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

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

1 个答案: