ローカル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é"
}
]
私は、コンソールでこれを取得する:
これは、フェッチ呼び出しでデータが正常に取得されていることを示していますが、モデルにデータが入力されていないことを示しています。誰かが私がここで間違っていることを教えてもらえますか?
ありがとう、多くのuser10、それは答えでした!私はまだ自分の道を見つけていて、 "this"はfetchSuccessの中にグローバルなスコープを持っていることに気付かなかった。私はまだ100%確かではないが、 "this"をfetchSuccessにバインドすると、コレクションのスコープ –
'fetchSuccess'は、Backbone.jsによってグローバルスコープで実行される' Backbone.sync'によって呼び出されるコールバックです。 – user10
ああそうだから!ありがとうuser10。 –