简短版本:我有一个 Backbone 模型,它的属性之一是第二个 Backbone 模型。第一个模型中的一个函数改变了第二个模型的状态,但是我的视图,它正在监听第一个模型的变化,似乎没有得到第二个模型的状态,尽管有任何数量的日志记录表明不是这样(我一直 this
在各个点登录以确认范围等)。我怎样才能解决这个问题?
长版:我有一个 Backbone 模型Course
,它代表一门学术课程,还有一个模型NameList
,它代表一个Course
. 一个Course
“有” NameList
。ANameList
由服务器上的单个文本文件支持。
我想在Course
模型中调用一个函数,该函数importNameList
创建一个新NameList
模型并导致该NameList
模型fetch
及其来自后端的数据。由于我的观点CourseView
是监听模型的变化Course
,并且Course
模型 has-a NameList
,看起来这应该相应地更新视图。我的问题是它没有。
我想做的事
var course = new Course();
var courseView = new CourseView({model : course});
courseView.model.importNameList('students.txt'); // Will cause view to re-render
我必须做什么
var course = new Course(); // same
var courseView = new CourseView({model : course}); // same
courseView.model.importNameList('students.txt'); // same
courseView.render(); // Argh, manually calling this is ugly.
这是我的带有日志记录语句的代码。模型扩展Backbone.DeepModel
只是因为我认为它可以解决我的问题,但它没有。
控制台输出
[console] var course = new Course();
[console] var courseView = new CourseView({model : course});
[console] course.importNameList('students.txt');
Course >>> importNameList
NameList >>> initialize()
NameList >>> fetch()
GET http://localhost/files/students.txt 200 OK 16ms
CourseView >>> render() // Render starts before fetch completes
CourseView <<< render() // Render finishes before fetch completes
Course <<< importNameList
NameList <<< fetch()
[console] courseView.render();
CourseView >>> render()
alice
bob
charlie
dan
erica
fred
george
CourseView <<< render()
课程.js
var Course = Backbone.DeepModel.extend({
defaults : {
nameList : new NameList()
},
initialize: function(options) {
if (options && options.nameList) {
this.set({nameList : options.nameList});
}
},
importNameList : function(fileName) {
console.log("Course >>> importNameList");
var nameList = new NameList({fileName : fileName});
this.set({nameList : nameList});
console.log("Course <<< importNameList");
}
});
名称列表.js
var NameList = Backbone.DeepModel.extend({
defaults : {
fileName : 'new.txt',
names : []
},
initialize: function(options) {
console.log("NameList >>> initialize()");
var model = this;
if (options && options.fileName) {
model.set({fileName : options.fileName});
}
model.fetch();
},
fetch : function() {
console.log("NameList >>> fetch()");
var model = this;
$.ajax({
url : '/files/' + model.get('fileName'),
success : function(response) {
model.set({names : response.split('\n')});
console.log("NameList <<< fetch()");
}
});
}
});
CourseView.js
var CourseView = Backbone.View.extend({
initialize : function(options) {
var view = this;
if (options && options.model) {
view.model = options.model;
} else {
view.model = new Course();
}
view.model.on('change', function() {
view.render();
});
},
render : function() {
console.log("CourseView >>> render()");
var names = this.model.get('nameList').get('names');
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
console.log("CourseView <<< render()");
return this;
}
});