KO 的计算属性 computed 上篇

[ahua52]

初始KO,计算属性（computed）尚未用到，在此做一个学习笔记

Computed observable是如何工作的

如果你已经有了一个监控属性firstName和lastName,如果你想显示全名该怎么做呢？这个时候你就可以通过计算属性来实现，这个方法依赖于一个或多个监控属性，如果任何依赖对象发生改变他们就会跟着改变.

创建一个简单的viewmodel

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

firstName和lastName 具备observable属性，现在可添加一个computed属性返回全名

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

下面你就可以绑定fullName 到你的dom上

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

当firstName或者lastName变化，它将会随时更新(当依赖关系发生变化，你的计算函数就会被调用，并且它的值都会更新到UI对象或其他的依赖属性上去)