Коллекция Backbone не получает модели
По сути, я пытаюсь отправить запрос GET на мой Node-сервер, чтобы я мог вернуться к сообщениям в блоге и создать ссылки. Я делаю collection.fetch
, который успешно завершает запрос GET (сервер Node регистрирует, что он отправляет нужные объекты). Модель успешно анализирует нужные данные, но когда я пытаюсь использовать коллекцию, она говорит, что она пуста. Вот код:
var mdm = mdm || {};
// MODEL
mdm.Post = Backbone.Model.extend({
parse: function( response ) {
response.id = response._id;
console.log(response); // logs the two documents
return response;
}
});
// COLLECTION
mdm.Posts = Backbone.Collection.extend({
model: mdm.Post,
url: '/api/posts'
});
// MODEL VIEW
mdm.LinkView = Backbone.View.extend({
template: _.template( $('#link_template').html() ),
render: function() {
this.$el.html( this.template( this.model.toJSON() ));
return this;
}
});
// COLLECTION VIEW
mdm.LinksView = Backbone.View.extend({
el: '#link_list',
initialize: function() {
this.collection = new mdm.Posts();
this.collection.fetch({reset: true});
// makes the request properly, but collection is empty
this.render();
// never gets called because the collection is empty
console.log(this.collection.length);
// logs a length of 0
},
render: function() {
// renders collection
}
});
$(function() {
new mdm.LinksView();
});
Данные отправляются и анализируются в моделях, поэтому я не уверен, что коллекция окажется пустой. Любая помощь будет принята с благодарностью.
2 ответа
Наиболее вероятная причина, по которой вы не видите модели в своем представлении, заключается в том, что рендеринг происходит до асинхронного fetch
завершено.
Что-то вроде ниже будет работать лучше:
mdm.LinksView = Backbone.View.extend({
el: '#link_list',
initialize: function() {
this.collection = new mdm.Posts();
this.listenTo(this.collection, 'reset', this.render);
this.collection.fetch({reset: true});
}
Приведенный выше код устанавливает слушателя для reset
событие на collection
и выполняет render
функционировать, когда это произойдет.
Кроме того, вы можете пройти в success
а также error
обработчики в fetch
и вызвать функцию рендеринга также вручную.
this.collection.fetch({
success: _.bind(function() {
this.render(); }, this)
});
Надеюсь это поможет!
Согласно комментарию @fbynite, проблема была связана с fetch
быть асинхронным. Я внес следующие изменения в представление коллекции, и он добился цели:
initialize: function() {
var self = this;
this.collection = new mdm.Posts();
this.collection.fetch({reset: true,
success: function() {
self.render();
console.log(self.collection.length);
}
});
},
Код является модификацией учебника по Backbone, поэтому другие пользователи могут столкнуться с подобной проблемой. http://addyosmani.github.io/backbone-fundamentals/