Backbone 未在初始化时看到模型更改。正常吗?
Backbone doesn't see Model changes on initialization. Is it normal?
在模型初始化时它设置了一些参数。在 View 初始化上是必须捕获该事件的侦听器。但事实并非如此。但是它可以在后续事件(如按钮的单击)上执行此操作。所以问题:
- 这是正常行为吗?
- 如果是,那目的是什么
- 如果不是,我的错误是什么?
玩的地方在这里:http://plnkr.co/edit/ddIZrkoI1n1CE6YrvMrC?p=preview
$(function(){
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
this.listenTo(this.model, 'change', function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
});
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});
如果您需要在模型的初始化中设置事件,因为 model.changed
直到下一个 set
才会改变,并且您的处理程序不依赖于事件给定的参数,您可以在视图的初始化中手动调用更改事件处理程序,如 Altered Plunker,或使用 model.trigger('change', ...)
触发更改处理程序。
$(function(){
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
// Pull the handler out as an attr of view's
this.listenTo(this.model, 'change', this.onModelChanged);
// Manually call the handler to get the changes made by mode's
// initialization.
this.onModelChanged();
},
onModelChanged: function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
}
});
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});
在模型初始化时它设置了一些参数。在 View 初始化上是必须捕获该事件的侦听器。但事实并非如此。但是它可以在后续事件(如按钮的单击)上执行此操作。所以问题:
- 这是正常行为吗?
- 如果是,那目的是什么
- 如果不是,我的错误是什么?
玩的地方在这里:http://plnkr.co/edit/ddIZrkoI1n1CE6YrvMrC?p=preview
$(function(){
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
this.listenTo(this.model, 'change', function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
});
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});
如果您需要在模型的初始化中设置事件,因为 model.changed
直到下一个 set
才会改变,并且您的处理程序不依赖于事件给定的参数,您可以在视图的初始化中手动调用更改事件处理程序,如 Altered Plunker,或使用 model.trigger('change', ...)
触发更改处理程序。
$(function(){
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
// Pull the handler out as an attr of view's
this.listenTo(this.model, 'change', this.onModelChanged);
// Manually call the handler to get the changes made by mode's
// initialization.
this.onModelChanged();
},
onModelChanged: function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
}
});
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});