Knockout自定义绑定创建方法


Posted in Javascript onDecember 26, 2015

概述

除了上一篇列出的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自定义绑定创建方法,希望大家喜欢。

Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
JavaScript动态设置div的样式的方法
Dec 26 #Javascript
JS插件overlib用法实例详解
Dec 26 #Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 #Javascript
详解Document.Cookie
Dec 25 #Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 #Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
求职者简历中的自我评价
2013/10/20 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
大学生个人自荐信
2014/02/24 职场文书
家长会标语
2014/06/24 职场文书
雷锋电影观后感
2015/06/10 职场文书
消费者理赔投诉书
2015/07/02 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python