knockoutjs20进一步的技术二.docx
- 文档编号:16143173
- 上传时间:2023-07-10
- 格式:DOCX
- 页数:13
- 大小:21.72KB
knockoutjs20进一步的技术二.docx
《knockoutjs20进一步的技术二.docx》由会员分享,可在线阅读,更多相关《knockoutjs20进一步的技术二.docx(13页珍藏版)》请在冰点文库上搜索。
knockoutjs20进一步的技术二
使用扩展,以增加观测
淘汰赛观测提供必要的支持读/写值,并通知用户,价值变动时的基本特征。
虽然,在某些情况下,你不妨添加额外的功能,可观察到的。
这可能包括增加额外的属性,以观察或观察前方放置在一个可写的计算观察拦截写入。
淘汰赛的扩展提供了一个方便和灵活的方式来做到这一点的增强型可观察到的。
如何创建一个扩展
创建一个扩展,涉及添加功能的ko.extenders对象的。
作为第一个参数和第二个参数中的任何选项,在观察本身的功能。
然后,它可以返回新观察或回报的东西,像计算机的观察,以某种方式使用原始观察。
这个简单logChange扩展赞成的观察和使用控制台写的任何变化,以及一个可配置的消息。
ko.extenders.logChange=function(target,option){target.subscribe(function(newValue){console.log(option+":
"+newValue);});returntarget;};
你会使用这个扩展通过调用extend功能,可观察到的,并传递一个对象包含logChange财产。
this.firstName=ko.observable("Bob").extend({logChange:
"firstname"});
如果firstName观察的价值被改变了Ted,然后在控制台会显示firstname:
Ted。
活生生的例子1:
强制输入的是数字
此示例创建一个扩展,部队写观察是数字四舍五入到配置水平的精度。
在这种情况下,扩展会返回一个新的写入计算观察,将坐在前面拦截写入真正的观察。
(至整数)
(圆形两位小数)
源代码:
查看
ltr;text-align: left"> myNumberOne"/>(roundtowholenumber) myNumberOne"/>(一轮整数) ltr;text-align: left"> myNumberTwo"/>(roundtotwodecimals) myNumberTwo"/>(圆形两位小数) 源代码: 查看模型 ltr;text-align: left">ko.extenders.numeric=function(target,precision){ko.extenders.numeric=功能(目标,精度){ ltr;text-align: left">//createawriteablecomputedobservabletointerceptwritestoourobservable//创建一个可写的计算观察拦截写入我们的观察 ltr;text-align: left">varresult=puted({结果=puted({ ltr;text-align: left">read: target,//alwaysreturntheoriginalobservablesvalue阅读: 目标,//总是返回的原始观测值 ltr;text-align: left">write: function(newValue){写功能(newValue)以{ ltr;text-align: left">varcurrent=target(),无功电流=目标() ltr;text-align: left">roundingMultiplier=Math.pow(10,precision),roundingMultiplier=的Math.pow(10,精密) ltr;text-align: left">newValueAsNum=isNaN(newValue)? newValueAsNum=的isNaN(newValue)以? ltr;text-align: left">0: parseFloat(newValue),parseFloat(newValue)以0: ltr;text-align: left">valueToWrite=Math.round(newValueAsNum*roundingMultiplier)/roundingMultiplier;valueToWriteMath.round(newValueAsNum的*roundingMultiplier)/roundingMultiplier; ltr;text-align: left">//onlywriteifitchanged//只写如果改变 ltr;text-align: left">if(valueToWrite! ==current){(valueToWrite! ==电流){ ltr;text-align: left">target(valueToWrite);目标(valueToWrite); ltr;text-align: left">}else{}否则{ ltr;text-align: left">//iftheroundedvalueisthesame,butadifferentvaluewaswritten,forceanotificationforthecurrentfield//如果四舍五入的值是相同的,但写一个不同的值,强制流场的通知 ltr;text-align: left">if(newValue! =current){如果(newValue=电流){ ltr;text-align: left">target.notifySubscribers(valueToWrite);target.notifySubscribers(valueToWrite); ltr;text-align: left">}} ltr;text-align: left">}} ltr;text-align: left">}} ltr;text-align: left">});}); ltr;text-align: left">//initializewithcurrentvaluetomakesureitisroundedappropriately//初始化与电流值,以确保它是圆的适当 ltr;text-align: left">result(target());结果(目标()); ltr;text-align: left">//returnthenewcomputedobservable//返回计算的新观察 ltr;text-align: left">returnresult;返回结果; ltr;text-align: left">};}; ltr;text-align: left">functionAppViewModel(one,two){功能AppViewModel(一,二){ ltr;text-align: left">this.myNumberOne=ko.observable(one).extend({numeric: 0});延长。 this.myNumberOne=ko.observable (一)({数字: 0}); ltr;text-align: left">this.myNumberTwo=ko.observable(two).extend({numeric: 2});延长。 this.myNumberTwo=ko.observable (二)({数字: 2}); ltr;text-align: left">}} ltr;text-align: left">ko.applyBindings(newAppViewModel(221.2234,123.4525));ko.applyBindings(新AppViewModel(221.2234,123.4525)); 活生生的例子2: 添加一个观察验证 这个例子创建一个扩展,它允许被标记为一个可观察到。 扩展,而不是返回一个新的对象,这只是增加了额外的子观测到现有的观察。 由于观测的功能,实际上,他们可以有自己的属性。 然而,视图模型转换为JSON时,分观测将下降,我们将简单地离开我们的实际观察值。 这是一个很好的方式,只有相关的UI被送回服务器,不需要添加额外的功能。 源代码: 查看 ltr;text-align: left"> {error: firstName.hasError}"> {error: firstName.hasError}"> ltr;text-align: left"> firstName,valueUpdate: "afterkeydown"'/> firstName,valueUpdate: "afterkeydown"'/> ltr;text-align: left"> firstName.hasError,text: firstName.validationMessage'> firstName.hasError,text: firstName.validationMessage'> ltr;text-align: left"> ltr;text-align: left"> {error: lastName.hasError}"> {error: lastName.hasError}"> ltr;text-align: left"> lastName,valueUpdate: "afterkeydown"'/> lastName,valueUpdate: "afterkeydown"'/> ltr;text-align: left"> lastName.hasError,text: lastName.validationMessage'> lastName.hasError,text: lastName.validationMessage'> ltr;text-align: left"> 源代码: 查看模型
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- knockoutjs20 进一步 技术