Web——KnockOut 绑定语法之事件
7 click 绑定
目的
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。
例子
<div>You've clicked <span data-bind="text: numberOfClicks"></span> times<button data-bind="click: incrementClickCounter">Click me</button> </div><script type="text/javascript">var viewModel = {numberOfClicks: ko.observable(0),incrementClickCounter: function () {var previousCount =this.numberOfClicks();this.numberOfClicks(previousCount +1);}}; </script>
每次点击按钮的时候,都会调用incrementClickCounter()函数,然后更新自动更新点击次数。
参数
主参数
Click点击事件时所执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如:someObject.someFunction。
View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写incrementClickCounter 就可以了,而无需写成: viewModel.incrementClickCounter(尽管是合法的)。
其它参数
无
注1:传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数:
<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }">Click me </button>
这样,KO就会调用这个匿名函数,里面会执行viewModel.myFunction(),并且传进了'param1' 和'param2'参数。
注2:访问事件源对象
有些情况,你可能需要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:
<button data-bind="click: myFunction">Click me </button><script type="text/javascript">var viewModel = {myFunction: function (event) {if (event.shiftKey) {//do something different when user has shift key down } else {//do normal action }}}; </script>
如果你需要的话,可以使用匿名函数的第一个参数传进去,然后在里面调用:
<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }">Click me </button>
这样,KO就会将事件源对象传递给你的函数并且使用了。
注3: 允许执行默认事件
默认情况下,Knockout会阻止冒泡,防止默认的事件继续执行。例如,如果你点击一个a连接,在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model,而不是连接到另外一个页面。
当然,如果你想让默认的事件继续执行,你可以在你click的自定义函数里返回true。
注4:控制this句柄
初学者可以忽略这小节,因为大部分都用不着,高级用户可以参考如下内容:
KO在调用你定义的函数时,会将view model传给this对象(也就是ko.applyBindings使用的view model)。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如: this.someOtherViewModelProperty。
如果你想引用其它对象,我们有两种方式:
- 你可以和注1里那样使用匿名函数,因为它支持任意JavaScript 对象。
- 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如:
<button data-bind="click: someObject.someFunction.bind(someObject)">Click me </button>
如果你是C#或Java开发人员,你可以疑惑为什么我们还要用bind函数到一个对象想,特别是像调用someObject.someFunction。 原因是在JavaScript里,函数自己不是类的一部分,他们在单独存在的对象,有可能多个对象都引用同样的someFunction函数,所以当这个函数被调用的时候它不知道谁调用的(设置this给谁)。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model,但你可以用bind语法重定义它。
在注1里使用匿名函数的时候没有具体的要求,因为JavaScript代码 someObject.someFunction()就意味着调用someFunction,然后设置this到 someObject对象上。
注5:防止事件冒泡
默认情况下,Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如,如果你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的。如果需要,你可以通过额外的绑定clickBubble来禁止冒泡。例如:
<div data-bind="click: myDivHandler"><button data-bind="click: myButtonHandler, clickBubble: false">Click me</button> </div>
默认情况下,myButtonHandler会先执行,然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候,冒泡事件会被禁止。
依赖性
除KO核心类库外,无依赖。
8 event 绑定
(select 中的onchange事件 可以通过该绑定实现 event{change:$root.method()})找了好久才解决呢
目的
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。
例子
<div><div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">Mouse over me</div><div data-bind="visible: detailsEnabled">Details</div> </div><script type="text/javascript">var viewModel = {detailsEnabled: ko.observable(false),enableDetails: function () {this.detailsEnabled(true);},disableDetails: function () {this.detailsEnabled(false);}}; </script>
每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值,而第二个元素会根据detailsEnabled的值自动显示或者隐藏。
参数
主参数
你需要传入的是一个JavaScript对象,他的属性名是事件名称,值是你所需要执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: event: { mouseover: someObject.someFunction }。
View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写event: { mouseover: enableDetails } 就可以了,而无需写成: event: { mouseover: viewModel.enableDetails }(尽管是合法的)。
其它参数
无
注1:传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数:
<button data-bind="event: { mouseover: function() { viewModel.myFunction('param1', 'param2') } }">Click me </button>
这样,KO就会调用这个匿名函数,里面会执行viewModel.myFunction(),并且传进了'param1' 和'param2'参数。
注2:访问事件源对象
有些情况,你可能需要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:
<div data-bind="event: { mouseover: myFunction }">Mouse over me </div><script type="text/javascript">var viewModel = {myFunction: function (event) {if (event.shiftKey) {//do something different when user has shift key down } else {//do normal action }}}; </script>
如果你需要的话,可以使用匿名函数的第一个参数传进去,然后在里面调用:
<div data-bind="event: { mouseover: function(event) { viewModel.myFunction(event, 'param1', 'param2') } }">Mouse over me </div>
这样,KO就会将事件源对象传递给你的函数并且使用了。
注3: 允许执行默认事件
默认情况下,Knockout会阻止冒泡,防止默认的事件继续执行。例如,如果在一个input标签上绑定一个keypress事件,当你输入内容的时候,浏览器只会调用你的函数而不是天价你输入的值。另外一个例子click绑定,当你点击一个a连接,在执行完自定义事件时它不会连接到href地址。因为你的自定义事件主要就是操作你的view model,而不是连接到另外一个页面。
当然,如果你想让默认的事件继续执行,你可以在你event的自定义函数里返回true。
注4:控制this句柄
初学者可以忽略这小节,因为大部分都用不着,高级用户可以参考如下内容:
KO在调用你定义的event绑定函数时,会将view model传给this对象(也就是ko.applyBindings使用的view model)。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如: this.someOtherViewModelProperty。
如果你想引用其它对象,我们有两种方式:
- 你可以和注1里那样使用匿名函数,因为它支持任意JavaScript 对象。
- 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如:
<div data-bind="event: { mouseover: someObject.someFunction.bind(someObject) }">Mouse over me </div>
如果你是C#或Java开发人员,你可以疑惑为什么我们还要用bind函数到一个对象想,特别是像调用someObject.someFunction。 原因是在JavaScript里,函数自己不是类的一部分,他们在单独存在的对象,有可能多个对象都引用同样的someFunction函数,所以当这个函数被调用的时候它不知道谁调用的(设置this给谁)。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model,但你可以用bind语法重定义它。
在注1里使用匿名函数的时候没有具体的要求,因为JavaScript代码 someObject.someFunction()就意味着调用someFunction,然后设置this到 someObject对象上。
注5:防止事件冒泡
默认情况下,Knockout允许event事件继续在更高一层的事件句柄上冒泡执行。例如,如果你的元素和父元素都绑定了mouseover事件,那么如果你的鼠标在该元素移动的时候两个事件都会触发的。如果需要,你可以通过额外的绑定youreventBubble来禁止冒泡。例如:
<div data-bind="event: { mouseover: myDivHandler }"><button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">Click me</button> </div>
默认情况下,myButtonHandler会先执行,然后会冒泡执行myDivHandler。但一旦你设置了mouseoverBubble为false的时候,冒泡事件会被禁止。
依赖性
除KO核心类库外,无依赖。
9 submit 绑定
目的
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个,使用submit绑定就是为了处理view model的自定义函数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。
例子
<form data-bind="submit: doSomething">... form contents go here ...<button type="submit">Submit</button> </div><script type="text/javascript">var viewModel = {doSomething: function (formElement) {// ... now do something }}; </script>
这个例子里,KO将把整个form表单元素作为参数传递到你的submit绑定函数里。 你可以忽略不管,但是有些例子里是否有用,参考:ko.postJson工具。
为什么不在submit按钮上使用click绑定?
在form上,你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为,比如在输入框里输入回车的时候可以提交表单。
参数
主参数
你绑定到submit事件上的函数
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: submit: someObject.someFunction。
View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写submit: doSomething就可以了,而无需写成: submit: viewModel. doSomething(尽管是合法的)。
其它参数
无
备注:
关于如果传递更多的参数给submit绑定函数,或者当调用非view model里的函数的时如何控制this,请参考click绑定。所有click绑定相关的notes也都适用于submit绑定。
依赖性
除KO核心类库外,无依赖。
10 enable 绑定
目的
enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。
例子
<p><input type='checkbox' data-bind="checked: hasCellphone"/>I have a cellphone </p><p>Your cellphone number:<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/> </p><script type="text/javascript">var viewModel = {hasCellphone: ko.observable(false),cellphoneNumber: ""}; </script>
这个例子里,“Your cellphone number”后的text box 初始情况下是禁用的,只有当用户点击标签 “I have a cellphone”的时候才可用。
参数
主参数
声明DOM元素是否可用enabled。
非布尔值会被解析成布尔值。例如0和null被解析成false,21和非null对象被解析给true。
如果你的参数是observable的,那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是,则只会设置一次并且以后不再更新。
其它参数
无
注:任意使用JavaScript表达式
不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如,
<button data-bind="enabled: parseAreaCode(viewModel.cellphoneNumber()) != '555'">Do something </button>
依赖性
除KO核心类库外,无依赖。
11 disable 绑定
目的
disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input,select,和textarea上非常有用。
disable绑定和enable绑定正好相反,详情请参考enable绑定。
Web——KnockOut 绑定语法之事件相关推荐
- Knockout绑定语法
1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: ...
- Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用
要绑定到事件,请使用 Angular 的事件绑定语法.此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成.在下面的示例中,目标事件名是 click ,模板语句是 onSave() . < ...
- 微信小程序开发02(模板语法与事件绑定)
模板语法与事件绑定
- 微信小程序学习5:小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数 前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
- KnockOut绑定
1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: ...
- props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
- Web APIs三、DOM事件进阶
零.文章目录 Web APIs三.DOM事件进阶 1.事件流 (1)事件流和两个阶段说明 事件流指的是事件完整执行过程中的流动路径 假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段. ...
- ko学习二,绑定语法
补充上个监控数组ko.observableArray() ko常用的绑定:text绑定,样式绑定,数据数组绑定. visible 绑定.属性绑定 1.visible绑定 <div data-bi ...
- knockout click点击事件及事件源解释
绑定click点击事件示例 <body>you've clicked<span data-bind="text:number"></span>& ...
最新文章
- 小样,加张图你就不认识我了?“补丁”模型骗你没商量!| 技术头条
- 图像降维之MDS特征抽取方法
- getElementsByName和getElementById获取控件
- 浅析几种常见算法(转载)
- poj 1144 割点和桥
- html 列表点,HTML列表
- Apache 工作模式配置优化
- 关于CDN加速服务器的几个问题
- php ajax ip,php / ajax REMOTE_ADDR设置为伪网络适配器的IP
- Facebook 开源增强版 LASER,可使用90多种语言
- zynq开发系列5:通过AXI GPIO的中断实现PL端按键控制PS端LED
- 李宏毅2021春季机器学习教程HW1-COVID-19 Cases Prediction介绍
- 吉他入门教程之吉他音阶训练——认识音阶
- 数据分析案例1.0——药品销售分析
- 数字医学影像工作站相关资料汇总
- Greenplum 实时数据仓库实践(8)——事实表技术
- Liunx下Qos功能实现简析
- 如何学习图像处理(计算机视觉)的一些思考与分享
- C++|作业训练-虚函数
- 腾讯大讲堂:认清项目本质【从0开始学产品策划 ①】-20141127早读课
热门文章
- 考研数学一:高数、线性代数、概率论的一些个人认为抽象概念的形象解释【从几何、深度学习角度】
- 『HTMLCSS』第一个网页
- springboot在线教育学习系统在线视频点播系统毕业设计毕设作品开题报告开题答辩PPT
- 光盘显示0字节可用_HT光盘刻录管理系统~一套光盘智能管理的系统解决方案
- 自动编码(AE)器的简单实现
- C/C++是程序员必须掌握的语言吗?
- 2021年煤气考试题库及煤气考试内容
- unity3d 动态合批设置_Unity动态合批(Dynamic Batching)与静态合批(Static Batching)
- 网页中常见的元素有哪些
- unit自动驾驶怎么使用_高速公路开启“无人驾驶”模式,自动驾驶功能真是这么用的吗?...