Knockout2.x开发第十章：控制this句柄

初学者可以忽略这篇文章，因为大部分都用不着，高级用户可以参考如下内容：

先看个例子：

function AppViewModel() {
    var self = this;
 
    self.firstName = ko.observable('Bob');
    self.lastName = ko.observable('Smith');     
    self.fullName = ko.computed(function innerFun() {
        return self.firstName() + " " + self.lastName();
    });
}

如上例，为了在innerFun函数中使用firstName 、lastName 俩个属性，又单独定义了self内部变量，通过self.firstName() 来访问，即通过闭包来访问。否则无法访问。为了解决上面的问题knockout为ko.computed()方法还提供了一个参数，通过这个参数我们可以很方便，并且很优美的为view model添加依赖属性，看如下的例子：

function AppViewModel() {
    // ... leave firstName and lastName unchanged ...
 
    this.fullName = ko.computed(function innerFun() {
        return this.firstName() + " " + this.lastName();
    }, this);//将this作为参数传入
}

ko.computed()传入俩个参数：innerFun函数、this。这样在innerFun函数内部就可直接使用this.firstName() 、this.lastName () 。这是为什么那：

其实，KO在调用innerFun函数时，会将第二个参数(目前是this)传给innerFun函数的this对象,这样innerFun函数的this对象实际指向的是AppViewModel。

在看下动态添加依赖属性的情况：

var viewModel = {
    firstName: ko.observable('Bob'),
    lastName: ko.observable('Smith')
};

添加依赖属性：

viewModel.fullName = ko.computed(function innerFun() {
    return this.firstName() + " " + this.lastName();
}, viewModel);

此时是将viewModel作为参数传入到innerFun函数的this对象，效果是一样的。当然这里的函数名innerFun可以不写，我只是为了区分方便。

+友情链接