Javascript 为什么';t主干视图是否检测模型更改?
我有以下Backbone.js模型和集合:Javascript 为什么';t主干视图是否检测模型更改?,javascript,javascript-events,backbone.js,Javascript,Javascript Events,Backbone.js,我有以下Backbone.js模型和集合: // Model lr.Event = Backbone.Model.extend({}); // Collection lr.Events = Backbone.Collection.extend({ model: lr.Event, initialize: function(models, options) { this.date = options.date; }, url: function() { retu
// Model
lr.Event = Backbone.Model.extend({});
// Collection
lr.Events = Backbone.Collection.extend({
model: lr.Event,
initialize: function(models, options) {
this.date = options.date;
},
url: function() {
return '/events' + '?date=' + this.date.toString('yyyy-MM-dd');
}
});
与视图及其子视图一起使用:
// View
lr.MapView = Backbone.View.extend({
el: $('#wrapper'),
initialize: function() {
this.date = this.options.date;
_.bindAll(this, "render", "addAllEvents", "addOneEvent", "showNextDay", "collectData");
this.collectData();
},
events: {
"click #next": "showNextDay",
},
collectData: function() {
var that = this;
if (this.collection) this.collection.reset();
this.collection = new lr.Events([], { date : this.date });
this.collection.fetch({
success: function(resp) {
that.render();
that.addAllEvents();
}
});
},
showNextDay: function() {
this.date = this.date.add(1).days();
this.collectData();
},
addAllEvents: function() {
this.collection.each(this.addOneEvent);
},
addOneEvent: function(e) {
var ev = new lr.EventView({
model: e,
parentView: this
});
},
...
});
// Sub-view
lr.EventView = Backbone.View.extend({
initialize: function() {
var that = this;
this.model.bind('change', function() {
console.log('foo');
that.remove();
});
}
...
});
我正在尝试将子视图绑定到其关联模型的更改。所以我希望在调用this.collection.reset()
时,会调用console.log('foo')
。但事实并非如此。我在重置集合之前和之后对集合进行了console.log
ed操作,它肯定是从“有事”变为“无事”,因此我假设我在某种程度上弄乱了子视图与模型的绑定
有人看到错误吗?collection.reset()
(backbone.js
v0.91,第609行)仅在静默删除并可选地重新填充集合后触发reset
事件
collection.remove(模型)代码>(第548行)在每个模型上触发一个remove
事件,因此您可以使用
collection.remove(collection.models)
触发每个模型上的删除事件。在没有模型的情况下调用重置()
会清空集合,但不会“更改”现有模型。当模型的某些属性出现时,'change'事件发生。调用reset()
会触发集合本身的'reset'事件(在获取集合时也会触发);触发此操作时,还应重置UI,创建并呈现所有子视图项(在您的情况下,在获得重置事件时,您可能会调用render和addAllEvents)
现在,当事件模型的某些属性发生更改时,您将点击更改处理程序:
this.model.bind('change', function() {
console.log('foo');
that.remove();
});
但是,我真的怀疑您是否希望在模型更改时删除事件视图。更可能的情况是,您希望重新呈现它,或者使用JQuery更新它的某些部分。主干文档说“调用collection.reset()
而不传递任何模型作为参数将清空整个集合”。如果整个集合都被清空,这难道不意味着所有的模型都将被删除,并因此而改变吗?好的,源代码似乎和我上面描述的一样。也许值得向骨干团队提供bug报告/功能建议。完全有道理。非常感谢。
this.model.bind('change', function() {
console.log('foo');
that.remove();
});