Writable computed observables 可写计算监控属性
可写监控属性的要求较高,并且在大多数场合下并不常用。
一般来说,计算监控属性拥有一个有其它监控属性计算得来的值,也正因如此它是通常是只读的,看起来很奇怪,但是,确实有可能让计算监控属性成为可写的,你只需要提供回调函数合理的使用可写的值做一些事情。
你可以像常规的监控属性那样使用计算监控属性,只要你有自定义的逻辑用来截获所有的读写操作。就像普通监控属性一样,你可以使用链接语法编写拥有多个监控属性或计算监控属性的对象模型,例如:
myViewModel.fullName(‘Joe Smith‘).age(50)
可写计算监控属性拥有强大的特性使得其有更广泛的使用空间。
Exameple1: Decomposing user input 解析用户输入
回到经典的例子 “first name + last name = full name”, 你可以翻过的做: 将 fullName设置成一个可写的计算监控属性, 让用户可以直接编辑 full name ,然后用户的输入值将被解析并别映射回 firstName 和 lastName 监控属性, 在这个例子中,这个 write 回调函数控制处理了输入的值并将其分解成 firstName 和 lastName,并将其分别写回其对应依赖的监控属性。
<div> First name: <span data-bind="text: firstName"></span></div> <div> Last name: <span data-bind="text: lastName"></span></div> <div class="heading">Hello, <input data-bind="textInput: fullName"/><div> function MyViewModel(){ this.firstName = ko.observable(‘Planet‘); this.lastName = ko.observable(‘Earth‘); this.fullName = ko.pureComputed({ read: function(){ return this.firstName() + " " + this.lastName(); }, write: function(value){ var lastSpcePos = value.lastIndexOf(" "); if (lastSpacePos > 0){ this.firstName(value.substring(0, lastSpacePos)); this.lastName(value.substring(lastSpacePos + 1)); } }, owner: this }) } ko.applyBindings(new MyViewModel());
时间: 2024-10-11 05:37:30