バックボーンコレクションはデータを取得しますが、モデルは設定しません

Question

ローカルAPIからバックボーンコレクションを作成し、データを表示するようにビューを変更しようとしています。私のコレクション内のfetch（）コールは成功したように見え、データを取得しますが、フェッチ操作はコレクション内のモデルを更新しません。

これは私が私のモデルとコレクションのために持っているものです：

var Book = Backbone.Model.extend(); 

var BookList = Backbone.Collection.extend({ 

    model: Book, 
    url: 'http://local5/api/books', 

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

    fetchSuccess: function (collection, response) { 
     console.log('Collection fetch success', response); 
     console.log('Collection models: ', this.models); 
    }, 

    fetchError: function (collection, response) { 
     throw new Error("Books fetch error"); 
    } 

}); 

、私はこのように私の見解をやった：

var BookView = Backbone.View.extend({ 

    tagname: 'li', 

    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.model.bind('change', this.render); 
    }, 

    render: function(){ 
     this.$el.html(this.model.get('author') + ': ' + this.model.get('title')); 
     return this; 
    } 

}); 

var BookListView = Backbone.View.extend({ 

    el: $('body'), 

    initialize: function(){ 
     _.bindAll(this, 'render'); 

     this.collection = new BookList(); 
     this.collection.bind('reset', this.render) 
     this.collection.fetch(); 

     this.render(); 
    }, 

    render: function(){ 
     console.log('BookListView.render()'); 
     var self = this; 
     this.$el.append('<ul></ul>'); 
     _(this.collection.models).each(function(item){ 
      console.log('model: ', item) 
      self.appendItem(item); 
     }, this); 
    } 

}); 

var listView = new BookListView(); 

と私のAPIは次のようにJSONデータを返します。私はこのコードを実行すると

[ 
    { 
     "id": "1", 
     "title": "Ice Station Zebra", 
     "author": "Alistair MacLaine" 
    }, 
    { 
     "id": "2", 
     "title": "The Spy Who Came In From The Cold", 
     "author": "John le Carré" 
    } 
] 

私は、コンソールでこれを取得する：

これは、フェッチ呼び出しでデータが正常に取得されていることを示していますが、モデルにデータが入力されていないことを示しています。誰かが私がここで間違っていることを教えてもらえますか？

Answer 1

fetchSuccessの機能は、collection.modelsではなく、this.modelsである必要があります。

console.log('Collection models: ', collection.models); 

@Pappaによる提案を考慮してください。

Answer 2

BookListコレクションの初期化時とBookListViewの初期化時に、BookListコレクションでfetchを2回呼び出します。インスタンス化された瞬間にコレクションを作成するのは悪い習慣と考えられます。また、初期化呼び出しの中でビューを2回レンダリングします.1回は 'reset'イベントに応答してから、それを直接呼び出します。

BookListコレクションからinitialize関数を完全に削除し、this.render（）への呼び出しを削除することをお勧めします。あなたのBookListViewの初期化コールの終わりに。