間違ったバックボーン収集長。 Can not each collection

Question

私の悪い英語を申し訳ありません。以下は、なぜ起こるかを教えてください：

を私はいくつかのバックボーンコレクションを持っている：

var Background = window.Models.Background = Backbone.Model.extend({}); 

var Backgrounds = window.Models.Backgrounds = Backbone.Collection.extend({ 

    model: window.Models.Background, 

    url: '/backgrounds/', 

    initialize: function() { 

     this.fetch({ 
      success: this.fetchSuccess(this), 
      error: this.fetchError 
     }); 
    }, 

    fetchSuccess: function(collect_model) { 
     new BackgroundsView ({ collection : collect_model }); 
    }, 

    fetchError: function() { 
     throw new Error("Error fetching backgrounds"); 
    } 

}); 

そして、いくつかのビュー：

var BackgroundsView = window.Views.BackgroundsView = Backbone.View.extend({ 

    tagName: 'div', 

    className: 'hor_slider', 

    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     console.log(this.collection); 
     this.collection.each(function (background) { 
      console.log(background); 
      //var backgroundView = new BackgroundView ({ model: background }); 
      //this.$el.append(backgroundView.render().el); 
     }); 
    } 

}); 

は今、私はコレクション

var backgrounds = new Models.Backgrounds(); 

を作成するが、私はしなければなりませんこのビューをレンダリングします。コレクションのソートの過程で、その長さは0ですが、2でなければなりません。 This log I see at console。これはどのように可能ですか？私は何を間違えているのですか？

Answer 1

コレクションのフェッチが成功する前にビューを作成しています。あなたのコードは次のようになります。成功したフェッチするとき

initialize: function() { 

    this.fetch({ 
     success: this.fetchSuccess, 
     //------------------------^ do not invoke manually 
     error: this.fetchError 
    }); 
}, 
fetchSuccess: function(collection, response) { 
    new BackgroundsView ({ collection : collection}); 
}, 

あなたはバックボーンコールfetchSuccessをさせてください。今すぐファンクションを呼び出して戻り値undefinedを成功のコールバックとして渡しています。

---

これは間違ったパターンのようです。データモデルは、プレゼンテーションロジックを認識/制御してはいけません。

ビューを参照せずに浮遊しています。あなたはリファレンスを持つビューインスタンスを作成する必要があります（例えば、ルータから、またはアプリケーションを起動することが何であれ）。それにコレクションを渡す必要があります。次に、初期化メソッドからコレクションをフェッチし、フェッチが成功した後にレンダリングします。コレクションはthis.collectionから参照できます。

また、ルーター自体からコレクションを取得して、ビューインスタンスを作成することもできます。どちらの方法でもコレクション/モデルはビューを制御してはいけません。

Answer 2

コードが次のように構成されている場合、問題は解決されます。フェッチするには、パラメータリセットを追加する必要がありました。

var Background = window.Models.Background = Backbone.Model.extend({}); 

var Backgrounds = window.Models.Backgrounds = Backbone.Collection.extend({ 

    model: window.Models.Background, 

    url: '/backgrounds/', 

    initialize: function() { 

     this.fetch({ 
      reset : true, 
     }); 
    } 

}); 

var BackgroundsView = window.Views.BackgroundsView = Backbone.View.extend({ 

    tagName: 'div', 

    className: 'hor_slider', 

    initialize: function() { 
     this.listenTo(this.collection, 'reset', this.render); 
    }, 

    render: function() { 

     this.collection.each(function (background) { 

      var backgroundView = new BackgroundView ({ model: background }); 
      this.$el.append(backgroundView.render().el); 

     }, this); 
     $('#view_list').empty(); 
     $('#view_list').append(this.$el); 

     return this; 

    } 

});