可赋值的计算监控属性

时间:2021-12-26 20:11:03

标签:

可赋值的计算监控属性

可赋值的计算监控属性是非常专业的,,大多数情况下一般用不到,初学者可以跳过这一节

通常情况下,计算监控属性一般情况下是只读的。我们可以通过使用自己的回调函数让计算监控属性变为可赋值状态。

您可以用自己的定制逻辑让计算监控属性可写。就像将空属性,可以使用一个模型对象的链接的语法进行赋值。例如,myViewModel.fullName(‘Joe Smith‘).age(50)。

示例1:分解用用户输入

让我们回到经典的例子“名+姓=全名”例如,fullName是计算监控属性,用户可以直接编辑全名,再根据用户输入的全名解析并将值分别赋值给firstName和lastName这两个监控属性。

First name:

Last name:

Hello,

UI源码:

<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 lastSpacePos = value.lastIndexOf(" "); if (lastSpacePos > 0) { // Ignore values with no space character this.firstName(value.substring(0, lastSpacePos)); // Update "firstName" this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName" } }, owner: this }); } ko.applyBindings(new MyViewModel());

本例中,使用了pureComputed(当然也可以使用Computed)的read和write回掉函数,其中write回掉函数将计算监控属性进行解析,并分别赋值给firstName和lastName这两个监控属性。

示例2:选择或取消项目

未完待续。吃饭去了

KnockoutJS 3.X API 第三章 计算监控属性(2) 可赋值的计算监控属性