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

Posted 2020-08-11

可赋值的计算监控属性

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

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

您可以用自己的定制逻辑让计算监控属性可写。就像将空属性，可以使用一个模型对象的链接的语法进行赋值。例如，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：选择或取消项目

未完待续。吃饭去了