Bộ sưu tập xương sống tìm nạp dữ liệu nhưng không đặt mô hình

Question

Tôi đang cố gắng tập hợp bộ xương sống của mình từ API cục bộ và thay đổi chế độ xem để hiển thị dữ liệu. Lệnh fetch() trong bộ sưu tập của tôi dường như thành công và lấy dữ liệu, nhưng thao tác tìm nạp không cập nhật các mô hình trong bộ sưu tập.

Đây là những gì tôi đã có cho mô hình và bộ sưu tập của tôi:

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"); 
    } 

}); 

và tôi đã thực hiện quan điểm của tôi như thế này:

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(); 

và API của tôi trả về dữ liệu JSON như thế này:

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

Khi tôi chạy mã này tôi có được điều này trong bảng điều khiển

BookListView.render() app.js:67 
Collection fetch success Array[5] 
Collection models: undefined 

cho tôi biết rằng cuộc gọi tìm nạp đang nhận dữ liệu OK, nhưng nó không phổ biến các mô hình với dữ liệu đó. Bất cứ ai có thể cho tôi biết những gì tôi đang làm sai ở đây?

Answer 1

Chức năng fetchSuccess của bạn phải có collection.models không this.models.

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

và vui lòng xem xét các đề xuất do @Pappa đưa ra.

Answer 2

Bạn đang gọi tìm nạp trên bộ sưu tập Danh mục sách của mình hai lần, một lần khi được khởi tạo và lần nữa khi BookListView của bạn được khởi tạo. Nó được coi là thực hành xấu để có một bộ sưu tập cư trú chính nó tại thời điểm nó được khởi tạo. Bạn cũng sẽ hiển thị chế độ xem của mình hai lần bên trong cuộc gọi khởi tạo, một lần để phản hồi sự kiện 'đặt lại' và sau đó bạn cũng đang gọi trực tiếp.

Tôi khuyên bạn nên xóa hoàn toàn chức năng khởi tạo khỏi bộ sưu tập Danh sách sách của mình và xóa cuộc gọi đến this.render(); ở cuối cuộc gọi khởi tạo của BookListView.