我正在浏览淘汰教程,所有示例都使用“new”关键字创建视图模型:
//from learn.knockoutjs.com
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
我试图避免使用 new 关键字,它通常工作得很好,但我发现让 fullName 计算属性工作时遇到麻烦。这是我到目前为止所想到的。
function makeViewModel() {
return {
firstName: ko.observable("Bert"),
lastName: ko.observable("Bertington"),
fullName: ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this) };
}
ko.applyBindings(makeViewModel());
...这显然失败了,因为“this”不再引用传递给计算的函数内的本地对象。我可以通过创建一个变量并在附加计算函数并返回它之前存储视图模型来解决这个问题,但是如果存在一个更优雅和紧凑的解决方案,不需要我确保相互依赖的方法是按正确的顺序附加,我肯定想用它来代替。
有更好的解决方案吗?
您当然可以通过使函数自调用来绕过使用 new 关键字,但我认为您最好解决“this”关键字的问题。我喜欢向人们展示 3 种创建视图模型的方法。
- 对象字面量http://jsfiddle.net/johnpapa/u9S93/ http://jsfiddle.net/johnpapa/u9S93/
- 作为一个函数http://jsfiddle.net/johnpapa/zBqxy/ http://jsfiddle.net/johnpapa/zBqxy/
- 与揭示模块模式http://jsfiddle.net/johnpapa/uRXPn/ http://jsfiddle.net/johnpapa/uRXPn/
当使用上面的选项2或3时,处理“this”关键字要容易得多。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)