データを複数回取得するバックボーン

Question

私がconsole.logに次のコードを書き込むと、コレクションの値が2倍になっていることがわかりました。たとえば、2つのレコードが保存されている場合、3つのレコードに対して4回フェッチされ、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呼び出すリスナーを持っているということです。レンダリングが呼び出されるたびに、新しいリスナーが追加され、次に何かがコレクションに追加されるときに呼び出される時間が増えます。

リスナーが1回だけ追加されるようにする必要があります。通常これはinitializeコールバック内で実行されます。

次の問題は、ロジック全体です。レンダーを呼び出すたびに、空のコレクションを作成していますか？コードをステップ実行して、コードが実際に行っていることがあなたがしようとしていることと比べているかを確認します。コレクションを空にしないようにすると、コレクションを繰り返し処理し、新しいモデルが追加されたときに既存のすべてのモデルの新しいビューを作成する必要がありますか？私はそうは思わない。

あなたのコードは次のようなものでなければなりません：

• コレクションを取得します。
• フェッチ後は、コレクションを繰り返し、各モデルのアイテムビューをレンダリングし、コレクションビューに追加することによってコレクションビューをレンダリングします。
• 新しいモデルが追加されると、アイテムビューをレンダリングしてコレクションに追加します。反復なし、リセットやものはありません。

これらの手順をそれぞれ行う方法は何百回もインターネットに掲載されていますので、もう一度書きません。