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

.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

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

KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常见的情况. evaluator - 用于返回计算值的函数. targetObject-如果给出定义的值this时KO调用回调函数.参见部分第三章 计算监控属性(1) 使用计算监控属性以获取更多信息. options - 计算监控属性的其他属性的对象.请参见下面的完整列表. ko.computed(

KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪

KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO立即调用其相关的函数来获取其初始值. 当相关函数正在运行,KO将建立一个订阅到相关监控属性(包括其他计算监控属性)并读取他们的值.订阅回调函数设置为订阅函数再次运行,循环的这个过程. 当有新的值,KO会通知你的计算监控属性将值反馈给用户. 采用PEEK控制依赖 Knockout的自动依赖跟踪通常不是

KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables

Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: 防止内存泄漏 减少计算开销 在PureComputed函数中,随着相关监控属性值变化的时候,在两种状态之间切换. 每当它没有 值变化的时候,它处于睡眠状态.当进入睡眠状态时,其配置的所有订阅它的依赖.在这种状态下,它不会订阅任何监控属性.如果当它被读取,返回的也是睡眠状态的值. 每当它的 值变化的时

KnockoutJS 3.X API 第六章 组件(2) 组件注册

要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍),通过自己的约定获取组件,而不是显式配置. 本节目录 将组件注册为viewmodel/template 指定视图模型 构造函数 共享对象实例 一个createViewModel工厂函数 一个AMD模块,其值描述一个viewmodel 指定模板 现有元素ID 现有元素实例 一串标记 DOM节点数组

KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法

注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法. 预处理绑定字符串 您可以通过为特定绑定处理程序(例如click,visible或任何自定义绑定处理程序)提供绑定预处理程序,来挂钩Knockout的逻辑来解释数据绑定属性. 为此,将预处理函数附加到绑定处理程序: ko.bindingHandlers.y

KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

本节目录: 一个例子 API component生命周期 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, without parameters Second instance, passing parameters UI源码: <h4>First instance, without parameters</h4> <div data-bind='compon

KnockoutJS 3.X API 第七章 其他技术(8) 异步错误处理

注意:本文档适用于Knockout 3.4.0及更高版本. ko.onError Knockout包装内部异步调用,并在抛出原始错误之前查找可选的ko.onError回调以执行(如果遇到异常). 这使您有机会运行自定义逻辑,例如将错误传递到日志记录模块. 此外,由于原始调用被包装在try / catch中,传递给ko.onError的错误包含一个堆栈属性,在使用window.onerror处理错误时,这在许多浏览器中不是真的. 此功能适用于以下上下文中的错误: 作为文本输入和值绑定的一部分进行的

KnockoutJS 3.X API 第四章 数据绑定(1) UI绑定

目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的可见或隐藏 例子: <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value

KnockoutJS 3.X API 第四章 数据绑定(2) 控制流foreach绑定

foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素. 当然,也可以配合其他控制流一起适用,例如if和with. 示例1:遍历监控属性数组 本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容 <table> <thead> <tr&g