在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 事件传递参数的方法的更多相关文章

  1. [ActionScript 3.0] AS3.0 给flash事件传递参数的方法

    有时我们想要给flash内置的事件(比如MouseEvent)传递参数,这时我们可以用到下面的方法. import flash.events.MouseEvent; mc.addEventListen ...

  2. react.js 点击事件传递参数的方法

    <button onClick={this.handleClick.bind(this, props0, props1, ...}></button> handleClick( ...

  3. Extjs中给同一个GridPanel中的事件添加参数的方法

    Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({            text:'启用',            scope ...

  4. C++向main函数传递参数的方法(实例已上传至github)

    通常情况下,我们定义的main函数都只有空形参列表: int main(){...} 然而,有时我们确实需要给mian传递实参,一种常见的情况是用户设置一组选项来确定函数所要执行的操作.例如,假定ma ...

  5. jsp中四种传递参数的方法

    jsp中四种传递参数的方法如下: 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="i ...

  6. 如何给html元素的onclick事件传递参数(即如何获取html标签的data-*属性)

    现在做的一个小系统为了达到领导所说的很炫的效果有用到Metro UI CSS,但是因为如何给每个磁贴(div标签)的click事件传递参数折腾了蛮久(偶是菜鸟),后来终于找到一个解决方案即通过data ...

  7. Jsp传递参数的方法

    今天老师讲了jsp中四种传递参数的方法,我觉得总结一下,挺好的,以备后用! 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超 ...

  8. Javascript 定时器调用传递参数的方法

    文章来源:  https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...

  9. JSP页面之间传递参数的方法有哪些?

    JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接

随机推荐

  1. spark项目打jar包,不包含依赖包问题的解决方案

    mvn clean package打包maven-archetype-webapp项目时,打包后的jar包含项目中引用的jar包(解压后,在WEB-INF有一个lib目录,该目录下有所有依赖包). m ...

  2. TCP和UDP的区别以及各自应用

    TCP(Transmission Control Protocol,传输控制协议)和UDP(User Datagram Protocol,用户数据报协议)是运输层的两个主要协议,均是互联网的正式标准. ...

  3. leetcode 620. Not Boring Movies 用where语句判断

    https://leetcode.com/problems/not-boring-movies/description/ 不管题目简不简单,现在先熟悉语法. 直接用where语句判断即可,判断奇偶可以 ...

  4. VS 快速插入无参构造器

    输入ctor后 点击两次Tab键,即可快速插入无参构造器.

  5. jemeter排至数据库时报:Access denied for user 'root'@'localhost' (using password:YES) 解决方案

    相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...

  6. java内存区域与内存溢出

    JVM的内存区域划分: jvm的内存区域分为5部分:程序计数器,虚拟机栈,本地方法栈,堆跟方法区. 程序计数器,虚拟机栈,本地方法栈三部分是线程私有的,堆跟方法区是公共的. 1.程序计数器 是一块较小 ...

  7. MakeFile基本使用

    MakeFile Making makefile demo # Run this line when useing `make` command # default is the target whi ...

  8. 实现Web层的日志切面(方便清晰查看日志)

      import org.aspectj.lang.JoinPoint; import org.aspectj.lang.Signature; import org.aspectj.lang.anno ...

  9. 斗鱼扩展--localStorage备份与导出(九)

    之前我们都把数据 放在了 localStorage 里,但扩展一旦卸载,数据就会被清空, 在Console里备份,一次只能输出一条,小白操作起来很不方便,所以能不能 导入,导出文件来进行备份还原呢? ...

  10. npm EPERM: operation not permitted, rename解决

    此问题并非权限问题! 执行如下3条命令解决: 1.清理npm缓存 npm cache clean --force 2.升级npm版本 npm install -g npm@latest --force ...