收藏取n * n視圖時只需要n

Question

我是初級骨幹jj。我創建了一個信息視圖和消息視圖收集 像

var MessageViewCollection = Backbone.View.extend({ 
      initialize: function(options) { 
       this.options = options; 
       this.$el = $(options.el); 
       // this.render(); 
       //this._addButton(this.options); 

       // this.model.on('change', this.render, this); 
       this.model.on('add', this.render, this); 
       this.model.on('remove', this.render, this); 

      // --> this.model is a collection : it has n models, which it fetches. 
       this.model.fetch({ 
        success: function() { 
         console.log('Successfully fetched all messages'); 
        }, 
        error: function(err) { 
         console.log('Failed to fetch messages ' + err); 
        } 
       }); 
      }, 
      render: function() { 
       var self = this; 
       this.$el.html(''); 
       // This button is getting rendered again ang again - can move the renderCollection. 
       this._addButton(this.options); 
       _.each(this.model.toArray(), function(message, i){ 
        self.$el.append((new MessageView({model: message})).render().$el); 
       }); 
       return this; 
      } 
     }); 

這種觀點是在開始呈現。我發現當它提取時，它有n個模型。對於每個模型，它創建一個MesageView。但它似乎創建了n * n個消息視圖。 並且最後只有n被附加到DOM。

它們只是一個網絡調用，可以提取n個模型的集合。這似乎浪費了客戶端資源，內存，處理能力。

我認爲我正在傾聽'添加'到這個集合，這導致渲染每次被調用，它會添加到集合中。這是問題嗎？

我該如何解決這個問題？

Answer 1

每次向集合添加內容時，都會再次運行渲染，因此會迭代整個集合。

所以你應該做的是創建一個模型的渲染功能。

this.listenTo(this.collection, 'add', this.renderMessage, this); 

renderMessage: function(message) { 
    this.$el.append((new MessageView({model: message})).render().$el); 
} 

當然，爲避免您不應該調用模型應該叫什麼收集混亂......