Магистральная загрузка данных несколько раз

Question

Когда я console.log следующий код, я заметил, что значения коллекции извлекаются в два раза. Например, если сохранено 2 записи, то она извлекается 4 раза, для 3 записей - 9 раз. Это связано с зомби-взглядами? Я думал, что они исправлены с введением this.listenTo.

render: function() { 
     console.log("inside render"); 
     var self = this; 
     this.model_date = $("#date").val(); 
     this.dateUrl = "https://xxxxx.firebaseio.com/" + this.model_date.replace(/\//g, ''); 
     //create an instance of the collection constructor FoodCollection with the current date 
     this.foodCollection = new app.FoodCollection([], { url: this.dateUrl }); 
     this.listenTo(this.foodCollection, 'add', this.render); 
     this.$list.html(''); 

     //this part is executed multiple times based on the number of records saved. 

     this.foodCollection.each(function(food) { 
      console.log("iterating over foodCollection"); 
      var view = new app.FoodRecords({ model: food }); 
      self.$list.append(view.render().el); 
     }); 
    }, 

    //called when an item is added and the add-food button is clicked 
    addFood: function() { 
     console.log("inside addFood"); 
     if (this.$input.val() == '') { 
      return; 
     }; 
     this.foodCollection.create(this.newAttributes()); 
     this.$input.val(''); 

    }, 

Answer 1

Основная проблема заключается в том, что у вас есть слушатель, который вызывает сам render внутри render метода. Таким образом, каждый раз, когда вызывается рендеринг, появляются новые слушатели, увеличивая количество времени, которое будет вызвано в следующий раз, когда что-то добавится в коллекцию.

Вы должны убедиться, что слушатели добавляются только один раз. Обычно это делается внутри обратного вызова initialize.

Следующая проблема заключается в вашей логике. Каждый раз, когда вы вызываете рендер, вы создаете пустую коллекцию ?. Пройдите код и посмотрите, что делает ваш код по сравнению с тем, что вы намереваетесь сделать. Если вы избегаете опорожнения коллекции, то вы действительно хотите перебирать коллекцию и создавать новое представление для всех существующих моделей при добавлении новой модели? Я так не думаю.

Ваш код должен быть что-то вроде этого:

• Fetch коллекции.
• После выборки визуализируйте представление коллекции, итерируя по коллекции и визуализируя представление элемента для каждой модели и добавляя к коллекции.
• При добавлении новой модели визуализируйте представление элемента и добавьте его в коллекцию. Нет итераций, нет перезагрузки и прочее.

Как сделать каждый из этих шагов, было опубликовано в Интернете сотни раз, поэтому я не пишу его снова.