Knockout 事件传递参数的方法
在Knockout中直接使用函数传递参数是不行的,会导致函数在初始化时就被调用。
要实现参数的传递,有2种方法:
1、方法一:使用函数包裹
<div data-bind="event: { click: function(data, event) {changeEditor('param1', 'param2', data, event) } }">
Mouse over me
</div>
点击事件响应函数又套了一层,调用chageEditor函数,在原changeEditor()函数调用中传入参数。
2、方法二:使用bind函数
<button data-bind="event: { click: changeEditor.bind($data, 'param1', 'param2') }">
Click me
</button>
使用该方式传递参数时,$data为形式化写法,不能改变,后面可带若干参数,如param1,param2等。
3、缺省的参数传递
<div data-bind="event: { mouseover: myFunction }">
Mouse over me
</div>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>
即使绑定定义中函数不带任何参数,data和event两个参数总会被缺省传递,data指当前的viewModel对象,event为事件对象。
注意:在bind方式传递参数时,data和event两个参数依然被缺省传递,新加入的参数,在使用时排在第一位,例如,进行下面的定义:
<span style="font-size:14px;"><div data-bind="click:changeEditor.bind($data,$index)"></div></span>
在使用时,index 为第一个参数。
function changeEditor(index,data, event){
alert('参数:'+ index + ',' + data+ "," + event);
alert(arguments.length);
var tmp = data;
tmp.headerText = 'OK!!!';
tmp.editing = true;
// columns2[idx](tmp);
}
Knockout 事件传递参数的方法的更多相关文章
- [ActionScript 3.0] AS3.0 给flash事件传递参数的方法
有时我们想要给flash内置的事件(比如MouseEvent)传递参数,这时我们可以用到下面的方法. import flash.events.MouseEvent; mc.addEventListen ...
- react.js 点击事件传递参数的方法
<button onClick={this.handleClick.bind(this, props0, props1, ...}></button> handleClick( ...
- Extjs中给同一个GridPanel中的事件添加参数的方法
Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({ text:'启用', scope ...
- C++向main函数传递参数的方法(实例已上传至github)
通常情况下,我们定义的main函数都只有空形参列表: int main(){...} 然而,有时我们确实需要给mian传递实参,一种常见的情况是用户设置一组选项来确定函数所要执行的操作.例如,假定ma ...
- jsp中四种传递参数的方法
jsp中四种传递参数的方法如下: 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="i ...
- 如何给html元素的onclick事件传递参数(即如何获取html标签的data-*属性)
现在做的一个小系统为了达到领导所说的很炫的效果有用到Metro UI CSS,但是因为如何给每个磁贴(div标签)的click事件传递参数折腾了蛮久(偶是菜鸟),后来终于找到一个解决方案即通过data ...
- Jsp传递参数的方法
今天老师讲了jsp中四种传递参数的方法,我觉得总结一下,挺好的,以备后用! 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超 ...
- Javascript 定时器调用传递参数的方法
文章来源: https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...
- JSP页面之间传递参数的方法有哪些?
JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接
随机推荐
- redis初步学习 0
2.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis提供了一些丰富的数据 ...
- JS你可能还不知道的一些知识点(一)
js程序是用Unicode字符集编写的, 2.转义字符:反斜线 1 2 3 4 function Test(){ var s='you\'re right,it can\'t be a quote ...
- Dotfuscator 的使用方法
打开Dotfuscator工具,选择“Create New Project” 在Input选项中选择需要混淆的文件 把 Disable String Encryption 设为 NO,即启用字符串加密 ...
- eureka 源码
本文为eureka学习笔记,错误之处请指正. ----------------------------------------------------------- 1.服务生产者是怎么注册到配置中心 ...
- nginx虚拟主机配置和反向代理
虚拟主机有三种配置方式(常用于本机测试使用,将一个ip和端口的请求根据域名不同分配到不同的应用服务器) 基于ip 不常用 基于端口 可选 基于域名 可选 #user nobody; worker_pr ...
- pat1080. Graduate Admission (30)
1080. Graduate Admission (30) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...
- pat03-树1. 二分法求多项式单根(20)
03-树1. 二分法求多项式单根(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 杨起帆(浙江大学城市学院) 二分法求函数根的 ...
- jQuery的下拉框应用
jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...
- vue2.0 $router和$route的区别
在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...
- Web前端开发规范(一)
1.前言 网页开发技术从1989年开始至今已经走过了20余年,从最初纯粹的学术交流,到门户网站.电子商务网站.博客.E-mail.Web游戏.SNS网站等,以及到如今的移动Web网站(其实可以认为是P ...