.liveexample {
padding: 1em;
background-color: #eeeedd;
border: 1px solid #ccc;
max-width: 655px;
font-size:18px;
可赋值的计算监控属性
可赋值的计算监控属性是非常专业的,大多数情况下一般用不到,初学者可以跳过这一节
通常情况下,计算监控属性一般情况下是只读的。我们可以通过使用自己的回调函数让计算监控属性变为可赋值状态。
您可以用自己的定制逻辑让计算监控属性可写。就像将空属性,可以使用一个模型对象的链接的语法进行赋值。例如,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:选择或取消项目
未完待续。吃饭去了
时间: 2024-12-19 00:18:40