Knockout自定义绑定创建方法
概述
除了上一篇列出的KO内置的绑定类型(如value、text等),你也可以创建自定义绑定。
注册你的binding handler
ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called once when the binding is first applied to an element, // and again whenever any observables/computeds that are accessed change // Update the DOM element based on the supplied values here. } };
接下来你就可以在任意dom元素上使用的自定义绑定了:
<div data-bind="yourBindingName: someValue"> </div>
注意:你不必在你的handler里把init和update的callback都提供,可以提供任意一个。
update callback
顾名思义,当你的监控属性observable更新的时候,ko会自动调用你的update回调。
它有以下参数:
element:使用这个绑定的dom元素;
valueAccessor : 通过调用valueAccessor()可以获得当前绑定的model属性值,调用ko.unwrap(valueAccessor())能够更方便的获取observable的值和普通值;
allBindings : 绑定到这个dom元素上的model的所有属性值,例如调用callBindings.get('name') 返回绑定的name属性值(不存在返回undefined),或者调用allBindings.has('name')判断name是否绑定到了当前的dom中;
viewModel : 在Knockout.3x中以弃用,可用bindingContext.$data或者bindingContext.$rawData来获取当前的viewModel;
bindingContext : 绑定上下文,可调用bindingContext.$data、 bindingContext.$parent, bindingContext.$parents等获取数据;
接下来看一个例子,你也许希望使用visible绑定来控制元素的可见性,并且加上动画效果,这时你可以创建你的自定义绑定:
ko.bindingHandlers.slideVisible = { update: function(element, valueAccessor, allBindings) { // First get the latest data that we're bound to var value = valueAccessor(); // Next, whether or not the supplied model property is observable, get its current value var valueUnwrapped = ko.unwrap(value); // Grab some more data from another binding property var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified // Now manipulate the DOM element if (valueUnwrapped == true) $(element).slideDown(duration); // Make the element visible else $(element).slideUp(duration); // Make the element invisible } };
然后你可以这样使用这个自定义绑定:
<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div> <label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label> <script type="text/javascript"> var viewModel = { giftWrap: ko.observable(true) }; ko.applyBindings(viewModel); </script>
init callback
ko将为每个使用绑定的dom元素调用你的init函数,它有两个主要用途:
(1)为dom元素设置初始化状态;
(2)注册一些事件处理程序,例如:当用户点击或者修改dom元素时,你可以改变监控属性的状态;
ko将使用和update回调完全相同一组参数。
继续前面的例子,你也许想让slideVisible在页面第一次显示的时候就设置该元素的可见性状态(没有任何动画效果),而动画效果是在以后改变的时候执行,你可以按照下面的方式来做:
ko.bindingHandlers.slideVisible = { init: function(element, valueAccessor) { var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false }, update: function(element, valueAccessor, allBindings) { // Leave as before } };
giftWrap被初始化定义为false(ko.observable(false)),关联的DIV会在初始化的时候隐藏,之后用户点击checkbox时才让DIV显示。
你现在已经知道如何使用update回调了,当observable值改变的时候你可以更新dom元素。我们现在可以用另外的方法来做,比如当用户有某个action操作时,也能引起你的observable值更新,例如:
ko.bindingHandlers.hasFocus = { init: function(element, valueAccessor) { $(element).focus(function() { var value = valueAccessor(); value(true); }); $(element).blur(function() { var value = valueAccessor(); value(false); }); }, update: function(element, valueAccessor) { var value = valueAccessor(); if (ko.unwrap(value)) element.focus(); else element.blur(); } };
现在你可以通过元素的“focusedness”绑定来读写你的observable值了。
<p>Name: <input data-bind="hasFocus: editingName" /></p> <!-- Showing that we can both read and write the focus state --> <div data-bind="visible: editingName">You're editing the name</div> <button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button> <script type="text/javascript"> var viewModel = { editingName: ko.observable() }; ko.applyBindings(viewModel); </script>
以上内容是小编给大家分享的Knockout自定义绑定创建方法,希望大家喜欢。
相关文章
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
- 这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下...2015-12-17
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 这篇文章主要介绍了微信小程序 Toast自定义实例详解的相关资料,需要的朋友可以参考下...2017-01-23
- 下面小编就为大家带来一篇thinkphp自定义权限管理之名称判断方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
- Nginx日志主要分为两种:访问日志和错误日志。访问日志主要记录客户端访问Nginx的每一个请求,格式可以自定义。下面这篇文章主要给大家介绍了Nginx自定义访问日志的配置方式,需要的朋友可以参考学习,下面来一起看看吧。...2017-07-06
- 这篇文章主要介绍了IIS自定义404错误页避免暴露.NET网站路径信息,在输入非.aspx页面时,显示默认404页面,暴露站点路径信息,本文就给出了一个解决方法,需要的朋友可以参考下...2016-01-27
- 这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下...2016-03-07
- 这篇文章主要介绍了Knockout自定义绑定创建方法的相关资料,需要的朋友可以参考下...2015-12-28
- jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下...2016-02-21
photoshop外挂滤镜KnockOut2抠出透明效果玻璃杯教程
今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说外挂滤镜KnockOut2抠出透明效果玻璃杯的教程,各位想知道具体抠图步骤的使用者,那么各位就快来看一看...2016-09-14- Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model、view、viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型来创建丰富的、响应式的用户界面...2015-12-27
- 这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。...2016-10-03
- 这篇文章主要介绍了微信小程序 自定义对话框实例详解的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下...2017-01-23
Angular.js中用ng-repeat-start实现自定义显示
大家都知道Angular.js可以用ng-repeat来显示列表数据,可是如果想要自定义显示数据列表的话ng-repeat就实现不了了,这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现,下面通过本文来详细看看实现的方法吧。...2016-10-20- 在我们的应用里经常会有一些全局都可能会用的函数,我们应该怎么自定义它比较好呢?字啊么这篇文章主要给大家介绍了在Laravel中如何增加自定义全局函数的相关资料,文中给出了两种实现方法,需要的朋友可以参考,下面来一起看看吧。...2017-05-21
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
这篇文章主要介绍了php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8用法,结合实例形式分析了针对gb2312与utf-8编码的自定义中文字符串截取函数的实现与使用方法,需要的朋友可以参考下...2016-06-12- 这篇文章主要给大家介绍了在laravel 5.3中自定义加密服务的相关资料,文中介绍的非常详细,对大家学习或者使用laravel 5.3具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-05-21
- 这篇文章主要介绍了bootstrap-treeview自定义事件双击事件实现方法,需要的朋友可以参考下...2016-01-12