Knockout.Js官网学习(创建自定义绑定)
前言
你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可以在form表单里自定义像grid,tabset等这样的绑定。
注册你的绑定
添加子属性到ko.bindingHandlers来注册你的绑定:
<script type="text/javascript">ko.bindingHandlers.yourBindName = {init: function (element, valueAccessor, allBindingsAccessor, viewModel){///绑定时,设置任何初始状态,事件处理程序},update: function (element,valueAccessor,allBindingsAccessor,viewModel) {///绑定之后应用于dom元素上,然后观察dom元素的变化,进行相应调用更新}}; </script>
然后就可以在任何DOM元素上使用了:
<div data-bind="yourBindingName: someValue"> </div>
你实际上没必要把init和update这两个callbacks都定义,你可以只定义其中的任意一个。
update回调
当管理的observable改变的时候,KO会调用你的update callback函数,然后传递以下参数:
element — 使用这个绑定的DOM元素
valueAccessor —JavaScript函数,通过valueAccessor()可以得到应用到这个绑定的model上的当前属性值。
allBindingsAccessor —JavaScript函数,通过allBindingsAccessor ()得到这个元素上所有model的属性值。
viewModel — 传递给ko.applyBindings使用的 view model参数,如果是模板内部的话,那这个参数就是传递给该模板的数据。
例如,你可能想通过 visible绑定来控制一个元素的可见性,但是你想让该元素在隐藏或者显示的时候加入动画效果。那你可以自定义自己的绑定来调用jQuery的slideUp/slideDown 函数:
ko.bindingHandlers.slidVisible = {update: function (element, valueAccessor, allBingingsAccessor, viewModel) {var value = valueAccessor(), allBindings = allBindingsAccessor();var valueUnwrapped = ko.utils.unwrapObservable(value);var duration = allBindings.slideDuration || 400;if (valueUnwrapped == true) {$(element).slideDown(duration);}else {$(element).slideUp(duration);}}};
然后你可以像这样使用你的绑定:
<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div> <label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
左边是初始化的,右边是点击Check之后的 ,你也可以运行查看效果,消失和出现都是渐变的效果,这自定义的绑定还是不错的。
init回调
Knockout在DOM元素使用自定义绑定的时候会调用你的init函数。init有两个重要的用途:
1.为Dom元素设置初始值
2.注册事件句柄,例如当用户点击或者编辑Dom元素的时候,你可以改变相关的observable值的状态。
KO会传递和update回调函数一样的参数。
继续上面的例子,你可以像让slideVisible在页面第一次显示的时候设置该元素的状态(但是不使用任何动画效果),而只是让动画在以后改变的时候再执行。你可以这样来做:
ko.bindingHandlers.slideVisible = {init: function(element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());$(element).toggle(value);},update: function (element, valueAccessor, allBingingsAccessor, viewModel) {var value = valueAccessor(), allBindings = allBingingsAccessor();var valueUnwrapped = ko.utils.unwrapObservable(value);var duration = allBindings.slideDuration || 400;if (valueUnwrapped == true) {$(element).slideDown(duration);}else {$(element).slideUp(duration);}}};
这就是说giftWrap的初始值声明的是false(例如giftWrap: ko.observable(false)),然后让初始值会让关联的DIV隐藏,之后用户点击checkbox的时候会让元素显示出来。
DOM事件之后更新observable值
你已经值得了如何使用update回调,当observable值改变的时候,你可以更新相关的DOM元素。但是其它形式的事件怎么做呢?比如当用户对某个DOM元素有某些action操作的时候,你想更新相关的observable值。
你可以使用init回调来注册一个事件句柄,这样可以改变相关的observable值,例如
ko.bindingHandlers.hasfocus = {init: function (element, valueAccessor) {$(element).focus(function () {var value = valueAccessor();});$(element).blur(function () {var value = valueAccessor();value(false);});},update: function (element, valueAccessor) {var value = valueAccessor();if (ko.utils.unwrapObservable(value)) {element.focus();}else {elemen.blur();}}};
现在你可以通过hasFocus绑定来读取或者写入这个observable值了:
<h2>DOM事件之后更新observable值</h2> <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>
当元素获得焦点和失去焦点
转载于:https://www.cnblogs.com/zxbzl/p/6004137.html
Knockout.Js官网学习(创建自定义绑定)相关推荐
- knockout+html绑定,Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Knockout 官网学习文档目录
官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...
- Angular官网学习笔记
Angular官网学习笔记 一.Angular概述 **什么是Angular:**一个基于TypeScript构建的开发平台包括: 一个基于组件的框架,用于构建可伸缩的Web应用 一组完美集成的库,涵 ...
- Spring AOP官网学习
Spring AOP官网学习 5.1 AOP概念 让我们从定义一些核心的AOP概念和术语开始.这些术语并不是spring特有的.不幸的是,AOP术语不是特别直观. 1.Aspect(方面):跨多个类的 ...
- Node.js 官网入门教程(一) CommonJS 模块规范、Node.js REPL、console、CLI、exports
Node.js 官网入门教程(一) CommonJS 模块规范.Node.js REPL.console.CLI.exports 文章目录 Node.js 官网入门教程(一) CommonJS 模块规 ...
- Node.js 官网入门教程(二) npm(安装、包版本、卸载、npx)、package.json(scripts、devDependencies)package-lock.json(语义版本规则符号
Node.js 官网入门教程(二) npm(包管理.安装.包版本.卸载.npx).package.json(scripts.devDependencies).package-lock.json(语义版 ...
- Spring官网学习(一)概述
文章目录 1.Spring官网简介 2.Spring总览 2.1.什么是Spring 2.2.Spring的发展历程 3.Spring的设计理念 3.1.Spring的优点 4.IOC和AOP浅析 4 ...
- 2021最新Node.js官网安装教程,配置环境变量(图文详细)
打开官网 Node.js官网 ,选择自己的版本,这里我使用的是Windows64位的,下载.msi安装包 下载之后,双击运行 点击next下一步 勾选同意,点击Next下一步 选择安装路径,这里我选择 ...
- PCL官网学习OpenNI Grabber 调用奥比中光Astra s 遇到问题openni2_grabber.cpp @ 325 : No devices connected.
PCL官网学习OpenNI Grabber 调用奥比中光Astra s 遇到问题openni2_grabber.cpp @ 325 : No devices connected. 问题描述 termi ...
最新文章
- Diango 模板层
- shop--10.店铺列表(前端)
- python内置数字类型转换函数_Python学习 Day2-2 Python3的基本数据类型、数据内置类型转换函数...
- python解释器 pip安装_pip安装Python库时的问题及解决方法总结
- 十道常见的MyBatis 面试题
- HTML wbr元素
- VS解决方案的目录结构设置和管理
- 酸奶小妹升级成酸奶妈妈了!
- Hadoop之基础概念
- scala spark 数据对比_Spark 实践——用 Scala 和 Spark 进行数据分析
- 海量数据搜索---demo展示百度、谷歌搜索引擎的实现
- 怎么用c语言解三元二次方程组,三元二次方程组解法
- WIN7 通知栏处喇叭上有个小红叉,提示未插入“未插入扬声器或耳机”的解决方法
- 杂记(关于域名、网名以及一些常用图像格式、像素)
- layui 数字步进器_光音移动设计规范 — 表单类
- Batch Normalization和Dropout
- 赛门铁克Symantec通配型SSL证书(Symantec Secure Site Wildcard SSL Certificates)
- kali系统破解wifi密码
- 旋转卡壳——对踵点对(定义)
- 95页智能工厂数字化、智能化规划、解决方案及建设方案2022