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());

  关于 Hello World 的完整例子可以参看链接。

  前面的例子用代码演示了单一参数语法初始化计算监控属性的例子,参看计算监控属性可以点击链接 computed observable reference 。

Example 2: Selecting/deselecting all items 全选/全消

  通常当呈现给用户一组可选的列表时,提供一个全选全消的功能非常有用,可以很直观的使用一个布尔值来表示是否选中了所有的项目,当设置 true 时选中所有项目,设置 false 时取消所有选中。  

<div class="heading"><input type="checkbox" data-bind="checked: selectedAllProduce" title="Select all/none"/> Produce
</div>
<div data-bind="foreach: produce"><label><input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedProduce"/><span data-bind="text: $data"></span></label>
</div>function MyViewModel() {this.produce = [ 'Apple', 'Banana', 'Celery', 'Corn', 'Orange', 'Spinach' ];this.selectedProduce = ko.observableArray([ 'Corn', 'Orange' ]); this.selectedAllProduce = ko.pureComputed({ read: function () { // Comparing length is quick and is accurate if only items from the // main array are added to the selected array. return this.selectedProduce().length === this.produce.length; }, write: function (value) { this.selectedProduce(value ? this.produce.slice(0) : []); }, owner: this }); } ko.applyBindings(new MyViewModel());

Example 3: A value converter 值的转换

  有时你可能想要使用不同于数据存储的格式在屏幕上展示一个一个值,例如,你使用float存储物品价格的值,但是想要让用户使用货币符合和固定小数位数来编辑它,你可以使用可写监控属性来展示格式化的物品价格,并映射输入值到后台存储的float值上。

<div>Enter bid price: <input data-bind="textInput: formattedPrice"/></div>
<div>(Raw value: <span data-bind="text: price"></span>)</div>function MyViewModel() {this.price = ko.observable(25.99);this.formattedPrice = ko.pureComputed({read: function() {return '$' + this.price().toFixed(2);},write: function(value) {value = parseFloat(value.replace(/[^\.\d]/g, ""));this.price(isNaN(value) ? 0 : value);},})
}ko.applyBindings(new MyViewModel());

现在,无论用户什么时候输入价格,使用什么格式输入,文本框都会立即更新显示成使用货币符号和固定两位小数格式化后的价格。这是一个很不错的用户体验,因为用户看到程序将录入的数据解释成了价格,他们就知道不能录入多余两位的金额,因为当他们尝试那样做事,多余的小数位会被立即清除,同样的,他们也不同录入负值,因为负号也会被 write 回调函数移除。

Example 4: Filtering and validating user input 过滤和验证用户输入

例1演示了计算监控属性能够有效的过滤输入的数据,不合规则的值不会被写回相关的监控属性,它将忽略不包含空格的全名。

  更进一步的讨论,你可以通过一个依赖于最新的入力是否合法的 isValid 标签的开关,来决定是否在UI上提示相应的消息。有更简单的方式来做验证(下边例子用来解释),请首先考虑下边的例子演示的机制:

<div>Enter a numeric value: <input data-bind="textInput: attemptedValue"/></div>
<div class="error" data-bind="visible: !lastInputWasValid()">That's not a number!</div>
<div>(Accepted value: <span data-bind="text: acceptedNumericValue"></span>)</div>function MyViewModel() {this.acceptedNumbericValue = ko.observable(123);this.lastInputWasValid = ko.observble(true);this.attemptedValue = ko.pureComputed({read: this.acceptedNumbericValue,write: function (value) {if (isNaN(value))this.lastInputWasValid(false);else {this.lastInputWasValid(true);this.acceptedNumbericValue(value);}},owner: this});
}ko.applyBindings(new MyViewModel());

  现在, acceptedNumericValue 将只接受纯数字的值,并且任何其他的输入值都将触发验证提示而不是更新操作。

注意:类似于验证输入数字值这样的小需求,使用这个技术有点杀鸡用牛刀。使用jQuery验证器,在<input>标签上使用 number 样式类 来实现同样的功能更容易。 Knockou和jQuery的验证器能够很好的协同工作,在 grid editor 的例子中有演示。

总之,在你需要处理比jQuery原生验证器更复杂的的业务时,之前的例子便是很好的演示了使用自定义的逻辑控制用户响应的过滤验证的机制。

转载于:https://www.cnblogs.com/petunsecn/p/4957623.html

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

  1. Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控

    2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...

  2. 基于 Prometheus 的边缘计算监控实践

    监控作为边缘计算基础设施的重要组成部分,是边缘稳定性的基本保障.本文主要介绍火山引擎边缘计算的监控实践,分享火山引擎如何进行监控技术选型以及构建监控服务体系.主要内容如下: 边缘计算监控初衷 基于 P ...

  3. PyQt5初学试验记录(三):Pyinstaller打包小结

    前言:本记录为笔者自学过程中的简单笔记,说明了从安装库到最终打包成.exe的过程,分为三个部分,供初学者参考交流,存在表述有误的部分还请读者们多多指教,下方为第三部分目录. 文章目录 一.Pyinst ...

  4. pinpoint 监控mysql_基于Centos7系统安装部署Pinpoint分布式监控

    概述 pinpoint是开源在github上的一款APM监控工具,它是用Java编写的,用于大规模分布式系统监控.它对性能的影响最小(只增加约3%资源利用率),安装agent是无侵入式的,只需要在被测 ...

  5. 【监控】Prometheus(普罗米修斯)监控概述

    文章目录 一.监控系统概论 二.基础资源监控 2.1.网络监控 2.2.存储监控 2.3.服务器监控 2.4.中间件监控 2.5.应用程序监控(APM) 三.Prometheus 简介 3.1.什么是 ...

  6. 监控linux终端键盘输入,Linux内核实时监控键盘输入

    刚毕业那会儿,VC6学习MFC,总得来点儿好玩的东西才能继续下去,毕竟不是科班出身,得完全靠意义去驱动-那个时候认识了键盘钩子,鼠标钩子之类: https://blog.csdn.net/dog250 ...

  7. computed用发_Vue中的computed属性和nextTick方法

    computed computed属性的实现原理 Vue实例初始化时,给data的每个属性(dataKey)都添加getter和setter方法 计算属性computed初始化时,提供的函数将作为对应 ...

  8. CAT分布式监控系统:CAT功能介绍,CAT监控系统是什么,能做什么?

    CAT分布式监控系统(一):CAT监控系统功能介绍        本文概要:              1.CAT监控系统是什么.               2.CAT监控系统能做什么,能监控些什么 ...

  9. linux运维管理之监控,Linux系统运维之运维监控.pdf

    <Linux 系统运维之运维监控> Linux系统运维之运维监控 Linux系统运维之运维监控 LLiinnuuxx系系统统运运维维之之运运维维监监控控 UNIXHOT 运维社区 UNIX ...

  10. 网管监控软件Hyperic HQ对DB2数据库的监控和管理

    DB2是IBM的企业级数据库产品. 它支持多种操作系统,能够运行TB级数据库,具有最高的性能和可扩展性. 网管监控软件Hyperic使用DB2的本地客户端接口对数据库引擎的每个实例以及单独的表取得高度 ...

最新文章

  1. 人工智能最受欢迎的十大TED演讲
  2. 腻害了!同事写了个隐藏 Bug,我排查了 3 天才解决问题!
  3. C# 指定字符串截取方法
  4. ffmpeg builds by zeranoe_FFmpeg
  5. 我的python 入门 安装 -- hello world
  6. js文件位置--为甚有些js必须放在尾部
  7. php动态写入vue,Vue.js中使用动态组件的方法
  8. 判断相等_C语言判断字符串是否为回文
  9. 如何创建和使用Web服务(转)
  10. 科学计数法 (C语言)
  11. Java类的三大特性总结
  12. SUSE Linux Enterprise Server 12 SP5 Install
  13. 计算机里的音乐怎么设置,声音和音频设备在电脑上如何设置 电脑无声的情况如何解决【详解】...
  14. DNS协议及Bind应用
  15. 7 Papers Radios | 矩阵乘法无需相乘,速度提升100倍;一个神经元顶5到8层神经网络...
  16. php公众号上传网络图片_PHP通过CURL上传图片(微信公众号上传素材)
  17. python turtle笛卡尔心形线_用MATLAB实现心形线
  18. android平台多路摄像头实现方式的简析
  19. SIGCOMM2022 Starvation in End-to-End Congestion Control
  20. 使用freesurfer和3Dslicer进行脑区分割和电极定点(日常记录)

热门文章

  1. iOS开发的几种加密方式
  2. KVM虚拟化笔记(十)------kvm虚拟机扩充磁盘空间
  3. your system apperars to have shutdown uncleanly
  4. 图文并茂排序与算法总结
  5. BGP的同步规则分析
  6. 6 - VC Bound (P[BAD]的真正上限)
  7. C语言中 指针和数组
  8. IIS7中添加html对! #include 的引用
  9. Java程序卡住问题的解决
  10. 我的博客之[网管日志]