小虾虎鱼

小虾虎鱼

Knockoutjs之Computed Observables的使用方法

作者 禾惠 发表于 2015/03/15,最后修改于 2015/03/15

如果你有一个firstName和一个lastName两个观察者,然后你想显示全名(fullName)该怎么办?这个时候computed observables就可以派上用场,computed observables依赖一个或者多个观察者(observable),并且当这些依赖观察者发生变化时也会随之发生变化。

举个例子,有如下一个模型:

function AppViewModel() {
    this.firstName = ko.observable('Bob');
    this.lastName = ko.observable('Smith');
}

如果现在想直接返回全名,我们可以这样写:

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

现在你可以在视图上这样绑定:

全名是<span data-bind="text:fullName"></span>

这时当firstName或者lastName发生变化时,fullName也会随之改变。

如果需求是这样子的:当firstName发生变化时,fullName不变,而当lastName发生变化时,fullName就会同时最新的firstNamelastName,这时我们就需要用到peek方法,于是上面的代码可以修改成:

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

代码中this.firstName.peek()就是取firstName最后一次更新的值。