初学knockoutjs记录5——Computed observables依赖监控(2 Writable computed observables可写计算监控属性)

Writable computed observables 可写计算监控属性

  可写监控属性的要求较高,并且在大多数场合下并不常用。

  一般来说,计算监控属性拥有一个有其它监控属性计算得来的值,也正因如此它是通常是只读的,看起来很奇怪,但是,确实有可能让计算监控属性成为可写的,你只需要提供回调函数合理的使用可写的值做一些事情。

  你可以像常规的监控属性那样使用计算监控属性,只要你有自定义的逻辑用来截获所有的读写操作。就像普通监控属性一样,你可以使用链接语法编写拥有多个监控属性或计算监控属性的对象模型,例如:

myViewModel.fullName(‘Joe Smith‘).age(50)

  可写计算监控属性拥有强大的特性使得其有更广泛的使用空间。

Exameple1: Decomposing user input 解析用户输入

  回到经典的例子 “first name + last name = full name”, 你可以翻过的做: 将 fullName设置成一个可写的计算监控属性, 让用户可以直接编辑 full name ,然后用户的输入值将被解析并别映射回 firstName 和 lastName 监控属性, 在这个例子中,这个 write 回调函数控制处理了输入的值并将其分解成 firstName 和 lastName,并将其分别写回其对应依赖的监控属性。

<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 lastSpcePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0){
                this.firstName(value.substring(0, lastSpacePos));
                this.lastName(value.substring(lastSpacePos + 1));
            }
        },
        owner: this
    })
}    

ko.applyBindings(new MyViewModel());
时间: 2024-10-11 05:37:30

初学knockoutjs记录5——Computed observables依赖监控(2 Writable computed observables可写计算监控属性)的相关文章

初学knockoutjs记录8——Computed observables依赖监控(5 Computed Observables Reference 计算监控属性参考)

Computed Observables Reference 计算监控属性参考 下述文档描述了怎样构造和使用计算监控属性. Constructing a computed ovservable 构造计算监控属性 一个计算监控属性可以使用下列任一方式进行构造: 1. ko.computed ( evaluator [, targetObject, options] ) -- 这种方式是创建计算监控属性最常用的方式,支持大多数场景. evaluator -- 一个函数用来评估计算当前计算监控属性的值

初学knockoutjs记录7——Computed observables依赖监控(4 Pure computed observables 纯计算监控属性)

Pure computed observables 纯计算监控属性 纯计算监控属性在knockout3.2.0中引入,给在大多数场合下常规的计算监控属性提供了一个速度和内存性能更好选择.这是因为纯计算监控属性在它本身没有被订阅的情况下不需要维护它的依赖. 它的特性: Prevents memore leaks 防止内存泄露.纯计算监控属性不再是一个程序引用,但是它的整个依赖依然存在. Reduces computation oberhead 减少计算开销.当值不再被监控时不再进行计算监控属性的计

初学knockoutjs记录2——Observables监控属性(2 Observable Arrays 监控数组)

1 Observable Arrays 监控数组 如果你想要监测和响应某个对象的变化,你应该使用Observable监控属性:如果你想要监测和响应一个对象集合的变化,那么请使用ObservableArray监控数组,这在很多场景下都很有用,例如当你要呈现或编辑多个值时,当你需要像列表项添加或移除一样处理UI上多个重复片段时. 例如 var myObservableArry = ko.observableArray(); // Initally an empty array myObservabl

可写的计算监控(Writable computed observables)

新手可忽略此小节,可写依赖监控属性真的是太advanced了,而且大部分情况下都用不到. 一般情况下,计算监控的值是通过其他监控属性的值计算出来的,因此它是只读的.这个看似很奇怪,我们有什么办法可以让他变成可写的吗. 此时,我们只需要提供一个callback的函数就可以做到. 通过你自定义的逻辑拦所有的读写操作,你可以像使用其他监控属性一样使用计算监控属性.类似obeservables一样,你可以一次改变多个observable或者computered observable属性的值,通过以下这种

初学knockoutjs记录2-Observables监控属性

1.创建带有监控属性的view model knockout建有3个核心特性: Observables监控属性和dependency tracking依赖跟踪 Declarative bindings 生命式绑定 Templating 模板 MVVM and View Models Model-View-View Model(MVVM) 是为了解决用户交互构建的设计模式,它通常被描述为如何将复杂的UI交互简单的分为三个部分: A Model: 应用程序的stored data存储数据模型,包含业

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

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

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

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

纯计算监控(Pure computed observables)

纯计算监控,在knockout 3.2.0里才有,提供了对性能和内存更好的管理.这是因为纯计算监控不包含对他的依赖的订阅.特点有: 防止内存泄漏 降低计算开销:值不再是observed,是一个不会重新计算的computed observables. 根据是否有订阅,pure computed observable会自动在两状态间进行切换: 1. 当没有订阅者(subscribers)时,是sleeping状态.当进入sleeping状态时,会释放所有依赖的订阅.在这个状态期间,它不会订阅任何在函

使用计算监控(Using computed observables)

计算监控(Computed Observables) 如果有两个监控属性firstName, lastName,此时我们要显示full name,我们要怎么办呢? 这时,可以创建一个computed observables来实现,其实他就是一个function,根据firstName, lastName计算得到full name.当first name, lastName改变时,fullName也会自动更新. 例如,看下面的view model: function AppViewModel()