KnockoutJS-自定义属性绑定
在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>
此处需要注意的是,在自定义绑定中,init和update方法不是一定要全部定义,也可以只定义其中一个。
最后将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-自定义属性绑定的更多相关文章
- WPF自定义控件的自定义属性绑定后不更新问题
原文:WPF自定义控件的自定义属性绑定后不更新问题 需要在绑定时设置属性变更触发 UpdateSourceTrigger=PropertyChanged 例如: <Border CornerRa ...
- knockoutjs with绑定导致unobtrusive validation失效的问题
如果最初的时候with绑定的对象是空的,那么with绑定内部的unobtrusive validation规则在提交的时候无法生效,无法进行验证. 解决办法: 在提交的时候(或者with绑定的对象非空 ...
- KnockoutJS(3)-绑定语法
绑定语法大致分为2种: 1. 数据绑定(data-bind syntax) 2. 绑定上下文(Binding Context) 下面针对这2中绑定语法分别介绍一下 1. 绑定上下文(Binding C ...
- knockoutjs -- if 绑定
参考:http://knockoutjs.com/documentation/if-binding.html If 绑定用来控制一部分html标签是否生成在DOM树中(html标签有data-bind ...
- avalon2简单数据绑定(自定义属性绑定)
<!DOCTYPE html> <html> <head> <title>项目</title> <meta charset=" ...
- KnockoutJS学习笔记10:KonckoutJS foreach绑定
KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- KnockoutJS-模板绑定
对于knockoutJS来讲,模板绑定和Mapping插件绑定是十分重要的功能,虽然模板绑定在我工作中用的及其少,但模板绑定的重要性不可忽视,在其他前端框架中,如Angular.Vue等等,模板存在的 ...
- KnockJs 绑定语法
按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...
- Vue之指令和绑定
一.v-once指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
随机推荐
- python1:基础数据类型(上)
https://www.geekdigging.com/2019/10/13/2870915864/ 1.数字 在python的数字有4钟数据类型,分别是: int(有符号整型) long(长整型) ...
- CSS自定义默认样式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...
- Mysql 执行计划以及常见索引问题总结
Mysql 执行计划以及常见索引问题总结
- SDCycleScrollView-简单的循环
cocoapods 导入SDCycleScrollView1 记得使用 SDWebImage 2 SDCycleScrollViewDelegate _cycleScrollerView = [SDC ...
- docker等文档
docker strapi koa express
- 解决pyinstaller在单一文件时无法正确添加权限清单问题,(UAC,uac_admin,manifest,asInvoker,python,requireAdministrator)
做了3天的win10的兼容性测试,大部分时间都卡权限获取这了. 以下废话很多,想直接找解决方法,请跳至红字 首先,简单说下uac,自vista后windows再次加严了权限管理,uac (账户控制) ...
- PG数计算
PG数计算 原地址:http://xiaqunfeng.cc/2017/09/15/too-many-PGs-per-OSD/ ceph告警问题:”too many PGs per OSD” 的解决方 ...
- 深入探讨多态性及其在Java中的好处
多态是面向对象软件的基本原理之一.该术语通常表示可以具有多种形式的事物.在面向对象的方法中,多态使编写具有后期绑定引用的程序成为可能.尽管在Java中创建多态引用很容易,但其背后的概念对整体编程产生了 ...
- 大数据学习笔记——Hadoop编程之SequenceFile
SequenceFile(Hadoop序列文件)基础知识与应用 上篇编程实战系列中本人介绍了基本的使用HDFS进行文件读写的方法,这一篇将承接上篇重点整理一下SequenceFile的相关知识及应用 ...
- Winform DataGridView控件数据导出EXcel
/// <summary> /// 导出Excel /// </summary> /// <param name="dgv"></para ...