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和收集將不同步，因爲你已經注意到了。如果你正在做一些非常激烈的事情（這也可能是不明智的），例如每隔100ms重繪一次集合或渲染5000個模型，你可能需要更復雜的方法，但這些都是代碼氣味，你的方法是錯誤的。如果你想要實時的東西，請查看socket.io和pub/sub。如果您打算使用setInterval進行服務器輪詢，只需KISS並清空視圖並重新渲染所有內容。

既然你這麼問，如果你確實需要避免與手動（和易碎）檢查重新渲染，穿上模型視圖的最外層標籤的data-id="<%= model.id %>"屬性，然後檢查this.$('[data-id=' + model.id + ']').length，以確定它是否在DOM已經或沒有。