我是 Backbone 的新手,我有一些代码应该监听属性更改并触发函数。我在网上看到的关于如何使用 listenTo 的所有内容似乎都涵盖了这种情况,所以我不知道我忽略了什么。
为了更好地理解我做了一个简单得多的示例,它只包含一个模型、一个 View 和设置 listenTo。问题仍然出现在那个较小的样本中。
我已经放入了一些代码来记录正在触发的函数以及触发顺序。当我看到运行此代码时几乎符合我期望的顺序,除了永远不会调用 onSomethingChanged。
var AppView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.model, 'change:hasName', this.onSomethingChanged);
$('#steps').append('<li>AppView initialize</li>');
this.model.setName('Test Name');
},
onSomethingChanged: function(){
$('#steps').append('<li>AppView onSomethingChanged</li>');
}
});
var SomeModel = Backbone.Model.extend({
initialize: function(){
this.bind('change:name', this.onNameChanged, this);
this.set({'name': 'Nothing'});
$('#steps').append('<li>SomeModel initialize</li>');
},
onNameChanged: function(status, name){
this.set({'hasName': name != null});
$('#steps').append('<li>SomeModel onNameChanged</li>');
},
setName: function(name){
this.set({'name': name});
$('#steps').append('<li>SomeModel setName</li>');
}
});
$(function(){
window.app = new AppView({model: new SomeModel()});
});
我在这里简单地设置了它:https://jsfiddle.net/hamveefz它显示的顺序是这样的:
- SomeModel onNameChanged
- 一些模型初始化
- 应用 View 初始化
- SomeModel onNameChanged
- SomeModel setName
我假设在 SomeModel 的 onNameChanged 函数中,它随后使用 hasName 属性执行“this.set”会自动导致调用 hasName 更改的监听器。
有人可以向我解释我哪里出错了吗?
最佳答案
调用 set
不一定会改变任何东西。例如,这个:
model.set('property', model.get('property'));
不会触发 'change'
事件,因为它实际上没有做任何事情。
您模型的initialize
设置名称:
this.set({'name': 'Nothing'});
'change:name'
处理程序由该点绑定(bind),因此 onNameChanged
将被调用并且 hasName
将设置为 是的
。
然后 View 被构建,它的initialize
将:
this.listenTo(this.model, 'change:hasName', this.onSomethingChanged);
this.model.setName('Test Name');
您认为 setName
应该触发 'change:hasName'
事件,但它不会。 hasName
属性此时已经是 true
并且您将执行 set('hasName', true)
所以它不会'不改变。
您最好将name
保留为null
或undefined
,直到它真正被设置为止。您将从模型的 initialize
中删除 this.set({'name': 'Nothing'});
并添加:
defaults: {
name: null,
hasName: false
}
然后调整 View (及其模板)以处理“无名称”的情况。
关于javascript - 主干 listenTo 不会因属性更改而触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31493589/