骨幹集合獲取數據，但不設置模型

我試圖從本地API填充我的Backbone集合並更改視圖以顯示數據。我的集合中的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é" 
    } 
]

當我運行這段代碼我得到這個在控制檯：

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

它向我表明提取調用正在獲取數據，但它沒有用它填充模型。任何人都可以告訴我我在這裏做錯了什麼？

來源

2013-10-20 And Finally

您的fetchSuccess函數應該有collection.models而不是this.models。

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

請考慮@Pappa提供的建議。

來源

2013-10-20 13:21:58 user10

非常感謝user10，那就是答案！我仍然在找到自己的方式，並沒有意識到「this」在fetchSuccess中具有全局作用域 - 我仍然不是100％確定爲什麼，但是當我將「this」綁定到fetchSuccess初始化它擁有的集合時集合的範圍。 –

'fetchSuccess'是Backbone.sync調用的回調函數，由Backbone.js在全局範圍內執行。 – user10

Ohhhh所以這就是爲什麼！感謝user10。 –

您在您的BookList集合中調用兩次fetch，一次是初始化時，另一次是您的BookListView初始化時。在實例化的時刻收集一個集合被認爲是不好的做法。您還在初始化調用中呈現您的視圖兩次，一次是爲了響應「重置」事件，然後您也直接調用它。

我建議從您的BookList集合中完全刪除初始化函數，並刪除對this.render（）;的調用。在您的BookListView的初始化調用結束時。

來源

2013-10-20 11:56:54 Pappa

謝謝帕帕，我會給你非常有用的建議！ –

如果一個視圖有一個初始化方法，它會自動調用this.render（）？ –

@AlexMills不，您必須手動調用渲染功能。 – Kevin

骨幹集合獲取數據，但不設置模型

回答

相關問題