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的树型插件(OrangeTree)使用介绍
May 03 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
JavaScript实现手风琴效果
Feb 18 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python调用fortran模块
2016/04/08 Python
Python 序列的方法总结
2016/10/18 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python中文编码知识点
2019/02/18 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
工作会议主持词
2014/03/17 职场文书
三爱活动实施方案
2014/03/19 职场文书
刊首寄语大全
2014/04/11 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
工作证明书
2015/06/15 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL