在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. 修改虚拟机IP地址

    Linux环境下IP地址配置文件路径: vim  /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE="eth0" BOOTPROTO ...

  2. CAD安装失败怎样卸载CAD 2009?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  3. 为什么CPU缓存会分为一级缓存L1、L2、L3?有什么意义?

    https://baijiahao.baidu.com/s?id=1598811284058671259&wfr=spider&for=pc 简介:CPU缓存是CPU一个重要的组成部分 ...

  4. node+mongoDB+express项目需求解释

    1. morgon模块 --- morgon 用于打印日志,分别为向后台打印和向文件中打印两种情况.stackoverflow. 2. app.use(bodyParser.json()) 3. de ...

  5. spring boot基本认识

    大家眼中的spring boot:https://www.zhihu.com/question/39483566-------------------------------------------- ...

  6. stm32 外部中断学习

    今天我们看看STM32的外部中断实验. STM32 供 IO 口使用的中断线只有 16 个,但是 STM32 的 IO 口却远远不止 16 个,那么 STM32 是怎么把 16 个中断线和 IO 口一 ...

  7. 《nginx 二》深入理解nginx的各项配置

    Nginx应用场景 1.http服务器.Nginx是一个http服务可以独立提供http服务.可以做网页静态服务器. 2.虚拟主机.可以实现在一台服务器虚拟出多个网站,例如个人网站使用的虚拟机. 3. ...

  8. pat1057. Stack (30)

    1057. Stack (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Stack is one of ...

  9. css内容整理2

    10.6.css伪类.伪元素 伪类用于向某些选择器添加特殊效果:伪元素用于将特殊的效果添加达到某选择器. 区别:伪类的效果可通过添加一个实际的类达到,用::伪元素效果则需要添加一个实际的元素,用:: ...

  10. C# FTPHelper帮助类

    网上的FTPHelper类感觉用起来不方便,而且代码的质量也不高,因此自己重新写了一个FTPHelper.此文之前是发布在我的CSDN博客中的,现在转过来. 主要就是借鉴了DbHelper的Creat ...