我有一只狗，它有一个与之相关的品种。现在，我只有一个视图，称为 DogView。我正在重新实现 Dog 中的 parse 方法，正如 StackOverflow 问题-> Backbone.js 中的嵌套模型中指定的那样，如何处理
但是，我遇到了问题。首先，我注意到 response[key] 似乎没有被加载，除非我明确地调用 response[key].fetch 。其次，视图没有被重新渲染。我相信这是因为没有像 Backbone 的文档声称的那样在 fetch 上触发 change 事件。
我已将视图设置为 this.listenTo 模型，并在它捕获事件时调用 this.render。但是，我一定做错了什么，因为当我查看我的输出时，它似乎没有打印出对象（它应该打印出来，因为我在渲染方法中打印出来）。
我正在使用backbone.js 1.0 版。你知道，我对 Backbone 还是很陌生。所以，请放轻松。我已经做了很多研究，并试图通过查找这些已回答的其他问题来自己解决这个问题。在任何人谈论 BackboneRelations 之前，我已经看过它，但是当我仍然不太了解基本框架时，我想跳入学习另一个框架只会使问题更加复杂。:) 无论如何，代码如下。我只是将其全部发布，因为它非常基础。
// The main view of the application
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('#dogs'),
initialize: function(){
var dogs = new DogList();
dogs.fetch({
success: function(data){
dogs.each(function(dog){
this.list = $('#dogsTempl');
var view = new DogView({ model: dog });
this.list.append(view.render().el);
}, this); // "this" is the context in the callback
}
});
},
render: function(){
return this;
}
});
new App();
--
var Dog = Backbone.Model.extend({
defaults: {
"class": "",
id: 1,
name: "Enter a name",
breed: {},
description: "Enter a description",
age: "Enter an age",
profile: null
},
urlRoot: "/rest/dog",
model: {
breed: Breed,
},
parse: function(response){
for(var key in this.model)
{
var embeddedClass = this.model[key];
var embeddedData = response[key];
response[key] = new embeddedClass(embeddedData, {parse:true})
console.log(response[key].toJSON());
response[key].fetch();
this.trigger('reset');
}
return response;
}
});
--
var DogList = Backbone.Collection.extend({
// Will hold objects of the Dog model
model: Dog,
url: '/rest/dog/user/'+ $('#userName').html()
});
--
var DogView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#dogTemplate' ).html()),
initialize: function(){
this.listenTo(this.model, "reset", this.render);
// Set up event listeners. The change backbone event
// is raised when a property changes (like the checked field)
if(!this.constructor.prototype.template) {
this.constructor.prototype.template = _.template($('#dogTemplate' ).html());
console.log('compile');
}
},
render: function(){
console.log(this.model.toJSON())
// Create the HTML
this.$el.html(this.template(this.model.toJSON()));
// Returning the object is a good practice
// that makes chaining possible
return this;
},
editDog: function(){
this.model.toggle();
}
});
--
var Breed = Backbone.Model.extend({
urlRoot: "/rest/breed",
defaults: {
id: null,
history: "Please enter a history",
name: "Please enter a name",
origin: "Please enter a bit about where this breed came from"
}
});