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)超链接
随机推荐
- 修改虚拟机IP地址
Linux环境下IP地址配置文件路径: vim /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE="eth0" BOOTPROTO ...
- CAD安装失败怎样卸载CAD 2009?错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- 为什么CPU缓存会分为一级缓存L1、L2、L3?有什么意义?
https://baijiahao.baidu.com/s?id=1598811284058671259&wfr=spider&for=pc 简介:CPU缓存是CPU一个重要的组成部分 ...
- node+mongoDB+express项目需求解释
1. morgon模块 --- morgon 用于打印日志,分别为向后台打印和向文件中打印两种情况.stackoverflow. 2. app.use(bodyParser.json()) 3. de ...
- spring boot基本认识
大家眼中的spring boot:https://www.zhihu.com/question/39483566-------------------------------------------- ...
- stm32 外部中断学习
今天我们看看STM32的外部中断实验. STM32 供 IO 口使用的中断线只有 16 个,但是 STM32 的 IO 口却远远不止 16 个,那么 STM32 是怎么把 16 个中断线和 IO 口一 ...
- 《nginx 二》深入理解nginx的各项配置
Nginx应用场景 1.http服务器.Nginx是一个http服务可以独立提供http服务.可以做网页静态服务器. 2.虚拟主机.可以实现在一台服务器虚拟出多个网站,例如个人网站使用的虚拟机. 3. ...
- pat1057. Stack (30)
1057. Stack (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Stack is one of ...
- css内容整理2
10.6.css伪类.伪元素 伪类用于向某些选择器添加特殊效果:伪元素用于将特殊的效果添加达到某选择器. 区别:伪类的效果可通过添加一个实际的类达到,用::伪元素效果则需要添加一个实际的元素,用:: ...
- C# FTPHelper帮助类
网上的FTPHelper类感觉用起来不方便,而且代码的质量也不高,因此自己重新写了一个FTPHelper.此文之前是发布在我的CSDN博客中的,现在转过来. 主要就是借鉴了DbHelper的Creat ...