knockoutjs2.0进一步的技术一

knockoutjs2.0进一步的技术一

ID:17774621

大小:22.66 KB

页数:6页

时间:2018-09-05

knockoutjs2.0进一步的技术一_第1页
knockoutjs2.0进一步的技术一_第2页
knockoutjs2.0进一步的技术一_第3页
knockoutjs2.0进一步的技术一_第4页
knockoutjs2.0进一步的技术一_第5页
资源描述:

《knockoutjs2.0进一步的技术一》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、创建自定义绑定你不仅限于使用类似内置绑定click,value,等等-你可以创建自己的。这是如何控制如何观测与DOM元素的交互方式,并为您提供了很多的灵活性,在一个易于重用的方式来封装复杂的行为。例如,你可以像的的网格,tabsets,等创建交互式组件,在自定义绑定的形式,(看到网格的例子)。重要:下列文件适用于1.1.1及以后淘汰赛。注册绑定的API是在1.1.0和更早的淘汰赛不同。注册您的约束力登记有约束力的,它作为一个子属性添加ko.bindingHandlers:ko.bindingHandlers.yourBindingName={init:function(e

2、lement,valueAccessor,allBindingsAccessor,viewModel){//Thiswillbecalledwhenthebindingisfirstappliedtoanelement//Setupanyinitialstate,eventhandlers,etc.here},update:function(element,valueAccessor,allBindingsAccessor,viewModel){//Thiswillbecalledoncewhenthebindingisfirstappliedtoanelement,//

3、andagainwhenevertheassociatedobservablechangesvalue.//UpdatetheDOMelementbasedonthesuppliedvalueshere.}};那么你可以使用任何DOM元素数量:

注:你不提供init和update回调-你可以提供一个或其他如果这就是你所需要的。“更新”回调每当相关的明显改变,正将打电话给你的update回调,传递以下参数:·element-在此绑定涉及的DOM元素·valueAccessor-一个

4、JavaScript函数,你可以打电话到当前模型的属性,在参与这一具有约束力。呼叫没有传递任何参数(即,调用valueAccessor()来得到当前的模型属性值。·allBindingsAccessor-一个JavaScript函数,你可以打电话让所有的模型绑定到这个DOM元素的属性。像valueAccessor,不带任何参数调用它来获取当前的绑定模型的性质。·viewModel-视图模型对象被传递到ko.applyBindings。内嵌套绑定上下文,这个参数将被设置为当前的数据项(例如,内with:person具有约束力,viewModel设置person)。例如,你可

5、能已经控制元素的可视性使用visible约束力,但现在你想更进一步和动画过渡。你想元素滑入了存在的根据观察值。你可以通过编写自定义绑定,调用jQuery的slideUp/slideDown功能:ko.bindingHandlers.slideVisible={update:function(element,valueAccessor,allBindingsAccessor){//Firstgetthelatestdatathatwe'reboundtovarvalue=valueAccessor(),allBindings=allBindingsAccessor();//

6、Next,whetherornotthesuppliedmodelpropertyisobservable,getitscurrentvaluevarvalueUnwrapped=ko.utils.unwrapObservable(value);//Grabsomemoredatafromanotherbindingpropertyvarduration=allBindings.slideDuration

7、

8、400;//400msisdefaultdurationunlessotherwisespecified//NowmanipulatetheDOMelementif(

9、valueUnwrapped==true)$(element).slideDown(duration);//Maketheelementvisibleelse$(element).slideUp(duration);//Maketheelementinvisible}};现在你可以使用这个绑定如下:Youhaveselectedtheoption

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签