在项目开发期间,我需要再收集一个。所以我克隆了我的旧系列并进行了设置。但是在SUCCESSFULLY fetch()之后我遇到了问题;我尝试渲染集合,但是this.collection.each(见下文)不会进入函数的“内部”。有人可以向我解释,为什么2个类似代码的类似集合不能以类似的方式工作?
我的旧系列包括电影数据: 型号:
var app = app || {};
app.User = Backbone.Model.extend({
defaults: {
facebook_name: undefined,
google_name: undefined,
google_photo: undefined,
google_url: undefined,
vk_name: undefined,
vk_photo: undefined,
vk_url: undefined,
local_name: undefined,
telegram: undefined,
id: undefined
},
parse: function( response ) {
response.id = response._id;
return response;
}
});
模型视图:
var app = app || {};
app.UserView = Backbone.View.extend({
tagName: 'div',
className: 'userContainer',
events: {
},
initialize : function() {
this.template= _.template( $('#userTemplate').html() );
},
render: function() {
this.$el.html( this.template( this.model.toJSON() ));
return this;
}
});
收集:
var app = app || {};
app.Users = Backbone.Collection.extend({
model: app.User,
url: '/user/allUsers'
});
收藏视图:
var app = app || {};
app.UsersView = Backbone.View.extend({
el: '#users',
events: {},
initialize: function() {
this.collection = new app.Users();
this.collection.fetch();
this.render();
//console.log(this.collection);
},
render: function() {
this.collection.each(function(item){
this.renderUser(item);
}, this);
},
renderUser: function(item) {
console.log("RenderUser Collection");
var userView = new app.UserView({
model: item
})
this.$el.append(userView.render().el);
}
});
Collection-prototype,工作正常
var app = app || {};
app.Film = Backbone.Model.extend({
defaults: {
title: 'No name',
year: 0,
rated: "Unknown",
released: 'Unknown',
runtime: 'Unknown',
genre: 'Unknown',
director: 'Unknown',
writer:'Unknown',
actors: 'Unknown',
plot: 'Unknown',
language: 'Unknown',
country: 'Unknown',
awards: 'Unknown',
poster: 'http://placehold.it/320x150',
imdbRating: 0,
imdbVotes: 0,
imdbID: 'Unknown',
type: 'Unknown',
userRate: 0
},
parse: function( response ) {
response.id = response._id;
return response;
}
});
var app = app || {};
app.Films = Backbone.Collection.extend({
model: app.Film,
url: '/film/all'
});
var app = app || {};
app.FilmView = Backbone.View.extend({
tagName: 'div',
className: 'filmContainer',
events: {
'click .details': 'details',
'click .star': 'rate'
},
initialize : function() {
this.template= _.template( $('#filmTemplate').html() );
},
render: function() {
this.$el.html( this.template( this.model.toJSON() ));
return this;
}
});
var app = app || {};
app.FilmsView = Backbone.View.extend({
el: '#films',
events: {},
initialize: function() {
this.collection = new app.Films();
this.collection.fetch();
this.render();
},
render: function() {
this.collection.each(function(item) {
this.renderFilm(item);
}, this);
},
renderFilm: function(item) {
var filmView = new app.FilmView({
model: item
})
this.$el.append(filmView.render().el);
}
});
通过这种方式解决了我的问题:
this.collection.fetch({
success: function(){
this.render();
}.bind(this)
});
感谢mu is too short提示。