首页 > 代码库 > KnockoutJS 3.X API 第三章 计算监控属性(2) 可赋值的计算监控属性
KnockoutJS 3.X API 第三章 计算监控属性(2) 可赋值的计算监控属性
<style>.liveexample { padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; font-size:18px;</style>
可赋值的计算监控属性
可赋值的计算监控属性是非常专业的，大多数情况下一般用不到，初学者可以跳过这一节
通常情况下，计算监控属性一般情况下是只读的。我们可以通过使用自己的回调函数让计算监控属性变为可赋值状态。
您可以用自己的定制逻辑让计算监控属性可写。就像将空属性，可以使用一个模型对象的链接的语法进行赋值。例如，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) 可赋值的计算监控属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。