在knockoutjs中,已有的绑定功能已经十分强大,基本上可以不需要再去考虑扩展了,但是,也有例外的场景,面对这种场景,还是得去完成,knockoutJS提供了自定义绑定来扩展绑定功能。

一、新建绑定

  新建一个js文件来尝试绑定功能,按照给定的格式ko.bindingHandlers.xxx来扩展一个绑定。

ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
// 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, allBindingsAccessor, viewModel) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
}
};

  其次,在html中完成绑定即可,用法同自带的绑定。

<div data-bind="yourBindingName: someValue"> </div>

  此处需要注意的是,在自定义绑定中,initupdate方法不是一定要全部定义,也可以只定义其中一个。

  最后将js文件引入,放置在knockoutjs下

<script src="~/lib/knockout/knockout-3.5.0.js"></script>
<script src="~/js/custombindings.js" asp-append-version="true"></script>

二、解析update函数

  当绑定的监听元素的发生改变时或是关联的监听元素改变时,knockout会回调update函数,只要存在关联的监听元素改变,update函数都会被立马回调,回调时会传递几个参数到update函数中。

  • element:本次绑定的DOM元素

  • valueAccessor:一个JavaScript函数,通过valueAccessor()可以得到应用到这个绑定的model上的当前属性值,使用valueAccessor()无需传入参数,再通过调用ko.unwrap()并传入valueAccessor()得到的属性值可以拿到实际值。

  • allBindings:一个JavaScript对象,通过这个对象可以访问绑定的DOM元素上的所有属性值,通过allBindings.get('属性名')得到这个元素上指定属性名的值,如果这个属性不存在,则返回undefined,或者通过allBindings.has(‘属性名’)来判别该属性是否存在于这个DOM元素上。

  • bindingContext: 当前元素的绑定上下文,通过该绑定上下文可以访问当前的绑定上下文内的属性及该绑定上下文的父级上下文内、同级上下文内的属性(功能十分强大)。

  例如,你可能想通过 visible绑定来控制一个元素的可见性,但是你想让该元素在隐藏或者显示的时候加入动画效果。那你可以自定义自己的绑定来调用jQuery的slideUp/slideDown 函数:

ko.bindingHandlers.slideVisible = {
update: function(element, valueAccessor, allBindings) {
// 获取属性值
var value = valueAccessor(); // 获取当前属性值
var valueUnwrapped = ko.unwrap(value); // 从当前绑定上下文的其它上下文获取属性值
var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified // 操控DOM元素
if (valueUnwrapped == true)
$(element).slideDown(duration); // Make the element visible
else
$(element).slideUp(duration); // Make the element invisible
}
};

  页面上,直接按照格式完成绑定,此处,我将自定义文件已经引入到模板页的js块中。

<div data-bind="slideVisible: giftWrap, slideDuration: 600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label> @section Scripts{
<script type="text/javascript">
var viewModel = {
giftWrap: ko.observable(true)
}; $(function () {
ko.applyBindings(viewModel);//完成绑定
});
</script>
}

  可以看到自定义绑定的效果,可以在多处地方完成绑定以实现代码重用。  

  

三、解析init函数

  knockout在DOM元素使用自定义绑定的时候会调用你的init函数,init函数主要有两个用途:

  • 为DOM元素设置初始值

  • 注册事件句柄,例如当用户点击或者编辑DOM元素的时候,你可以改变相关的observable值的状态。

  init函数接收和update函数一样的参数,按照上面的例子,改造一下,让slideVisible在页面第一次显示的时候设置该元素的状态(但是不使用任何动画效果),以便于让动画在以后用户改变的时候再执行。

ko.bindingHandlers.slideVisible = {
init: function (element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
$(element).toggle(value);
},
update: function (element, valueAccessor, allBindings) {
// 获取属性值
var value = valueAccessor(); // 获取当前属性值
var valueUnwrapped = ko.unwrap(value); // 从当前绑定上下文的其它上下文获取属性值
var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified // 操控DOM元素
if (valueUnwrapped == true)
$(element).slideDown(duration); // Make the element visible
else
$(element).slideUp(duration); // Make the element invisible
}
};

  将viewModel中的giftWrap设置默认值为false,当页面启动后将会看见相应的Div直接是隐藏状态,并在点击选中后才会显示出来。

var viewModel = {
giftWrap: ko.observable(true)
};

  

四、DOM事件后修改监听值

  已经掌握了使用update回调当observable值改变的时更新DOM元素。但是反过来的场景呢,例如当用户对某个DOM元素做一些操作时,想更新相关的observable值。这可以通过使用init回调来注册一个事件句柄,来改变相关的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();
}
};

  比如,当用户点击输入框时展示,离开时隐藏,同时修改监听值,控制按钮的启用禁用。

<p>Name: <input data-bind="hasFocus: editingName" /></p>

<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button> @section Scripts{
<script type="text/javascript">
var viewModel = {
giftWrap: ko.observable(false),
editingName: ko.observable()
}; $(function () {
ko.applyBindings(viewModel);//完成绑定
});
</script>
}

  可以得到如下效果

  

  在虚拟元素上也可以使用自定义绑定

<!-- ko mybinding: somedata --> ... <!-- /ko -->

 至此,完成了自定义绑定的方式,虽然实际使用的少,诸如二八原则,但是只要存在场景便可以发挥用武之地。

  代码地址:https://gitee.com/530521314/Partner.TreasureChest.git

2019-08-29,望技术有成后能回来看见自己的脚步

KnockoutJS-自定义属性绑定的更多相关文章

  1. WPF自定义控件的自定义属性绑定后不更新问题

    原文:WPF自定义控件的自定义属性绑定后不更新问题 需要在绑定时设置属性变更触发 UpdateSourceTrigger=PropertyChanged 例如: <Border CornerRa ...

  2. knockoutjs with绑定导致unobtrusive validation失效的问题

    如果最初的时候with绑定的对象是空的,那么with绑定内部的unobtrusive validation规则在提交的时候无法生效,无法进行验证. 解决办法: 在提交的时候(或者with绑定的对象非空 ...

  3. KnockoutJS(3)-绑定语法

    绑定语法大致分为2种: 1. 数据绑定(data-bind syntax) 2. 绑定上下文(Binding Context) 下面针对这2中绑定语法分别介绍一下 1. 绑定上下文(Binding C ...

  4. knockoutjs -- if 绑定

    参考:http://knockoutjs.com/documentation/if-binding.html If 绑定用来控制一部分html标签是否生成在DOM树中(html标签有data-bind ...

  5. avalon2简单数据绑定(自定义属性绑定)

    <!DOCTYPE html> <html> <head> <title>项目</title> <meta charset=" ...

  6. KnockoutJS学习笔记10:KonckoutJS foreach绑定

      KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...

  7. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  8. KnockoutJS-模板绑定

    对于knockoutJS来讲,模板绑定和Mapping插件绑定是十分重要的功能,虽然模板绑定在我工作中用的及其少,但模板绑定的重要性不可忽视,在其他前端框架中,如Angular.Vue等等,模板存在的 ...

  9. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  10. Vue之指令和绑定

    一.v-once指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...

随机推荐

  1. 请问1^x+2^x+3^x+\cdots +n^x的算式是什么呢?

    目录 总结 请问\(1^x+2^x+3^x+\cdots +n^x\)的算式是什么呢? 一.求和式\(\sum\limits_{i=1}^n{i}\)的算式 如何证明求和简式\(\sum_{i=1}^ ...

  2. 【Python还能干嘛】爬取微信好友头像完成马赛克拼图(千图成像)~

    马赛克拼图 何谓马赛克拼图(千图成像),简单来说就是将若干小图片平凑成为一张大图,如下图路飞一样,如果放大看你会发现里面都是一些海贼王里面的图片. Our Tragets 爬取所有微信好友的头像

  3. 小熊派IoT开发板系列教程正式发布——免费学习

    [摘要] 小熊派开源社区针对小熊派IoT开发板首次规划了小熊派未来的系列教程.从基础到进阶的设计,可适应具有不同基础的开发者,通过该系列教程的学习,开发者能够轻松掌握IoT产品的开发.该系列教程包括单 ...

  4. MySQL必知必会(使用子查询)

    SELECT cust_name, cust_contact FROM customers WHERE cust_id IN (SELECT cust_id FROM orders #单独写多个分句, ...

  5. iOS开发动画(Animation)总结

    UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果   翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:ni ...

  6. 声明式服务调用Feign

    什么是 Feign Feign 是种声明式.模板化的 HTTP 客户端(仅在 consumer 中使用).   什么是声明式,有什么作用,解决什么问题? 声明式调用就像调用本地方法一样调用远程方法;无 ...

  7. mysql主从复制原理及实践

    Mysql主从复制原理及实践 mysql主从框架       MySQL主从架构是MySQL集群中最基本也是最常用的一种架构部署,能够满足很多业务需求,常见的有一主一从或者一主多从.可以防止单一主机的 ...

  8. Java中的try-catch-finally异常处理

    Java中的try-catch-finally异常处理 一.异常处理 异常(Exception):是在运行发生的不正常情况. 原始异常处理: if(条件) { 处理办法1 处理办法2 处理办法3 } ...

  9. 超酷3D照片展示效果

    @{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...

  10. 【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用

    背景 前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架. 起初 ...