Knockout 事件传递参数的方法
2015-07-25 14:29
375 查看
在Knockout中直接使用函数传递参数是不行的,会导致函数在初始化时就被调用,例如:
[html] view
plaincopy
<span style="font-size:14px;"><div data-bind="click:changeEditor($index)"></div>
</span>
将导致函数在初始化时,点击事件changeEditor()函数就被调用,显然,违背初衷。
要实现参数的传递,有2种方法:
1、方法一:使用函数包裹
[html] view
plaincopy
<div data-bind="event: { click: function(data, event) {changeEditor('param1', 'param2', data, event) } }">
Mouse over me
</div>
点击事件响应函数又套了一层,调用chageEditor函数,在原changeEditor()函数调用中传入参数。
2、方法二:使用bind函数
[html] view
plaincopy
<button data-bind="event: { click: changeEditor.bind($data, 'param1', 'param2') }">
Click me
</button>
使用该方式传递参数时,$data为形式化写法,不能改变,后面可带若干参数,如param1,param2等。
3、缺省的参数传递
[html] view
plaincopy
<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两个参数依然被缺省传递,新加入的参数,在使用时排在第一位,例如,进行下面的定义:
[html] view
plaincopy
<span style="font-size:14px;"><div data-bind="click:changeEditor.bind($data,$index)"></div></span>
在使用时,index 为第一个参数。
[javascript] view
plaincopy
function changeEditor(index,data, event){
alert('参数:'+ index + ',' + data+ "," + event);
alert(arguments.length);
var tmp = data;
tmp.headerText = 'OK!!!';
tmp.editing = true;
// columns2[idx](tmp);
}
[html] view
plaincopy
<span style="font-size:14px;"><div data-bind="click:changeEditor($index)"></div>
</span>
将导致函数在初始化时,点击事件changeEditor()函数就被调用,显然,违背初衷。
要实现参数的传递,有2种方法:
1、方法一:使用函数包裹
[html] view
plaincopy
<div data-bind="event: { click: function(data, event) {changeEditor('param1', 'param2', data, event) } }">
Mouse over me
</div>
点击事件响应函数又套了一层,调用chageEditor函数,在原changeEditor()函数调用中传入参数。
2、方法二:使用bind函数
[html] view
plaincopy
<button data-bind="event: { click: changeEditor.bind($data, 'param1', 'param2') }">
Click me
</button>
使用该方式传递参数时,$data为形式化写法,不能改变,后面可带若干参数,如param1,param2等。
3、缺省的参数传递
[html] view
plaincopy
<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两个参数依然被缺省传递,新加入的参数,在使用时排在第一位,例如,进行下面的定义:
[html] view
plaincopy
<span style="font-size:14px;"><div data-bind="click:changeEditor.bind($data,$index)"></div></span>
在使用时,index 为第一个参数。
[javascript] view
plaincopy
function changeEditor(index,data, event){
alert('参数:'+ index + ',' + data+ "," + event);
alert(arguments.length);
var tmp = data;
tmp.headerText = 'OK!!!';
tmp.editing = true;
// columns2[idx](tmp);
}
相关文章推荐
- hdu 5303 Delicious Apples
- java 用 _id 查找 MongoDB 下的数据
- 三大抽样分布
- 设计模式_门面模式
- leetcode[137]:Single Number II
- 高可用集群技术理论基础知识
- ls命令的简单实现
- PAT (Advanced Level) 1043. Is It a Binary Search Tree (25) 判断序列是否为BST的先序遍历,递归
- QueryPerformanceFrequency()
- POJ 2065 SETI(高斯消元)
- java新手笔记21 接口
- HDU 5303 Delicious Apples 美味苹果 (DP)
- [黑马程序员](第19天)一些遗漏的知识点
- 设计模式_观察者模式
- Codeforces Round #261 (Div. 2) D. Pashmak and Parmida's problem
- Wolf and Rabbit
- ios下inhouse发布相关代码
- HDU 4507 吉哥系列故事——恨7不成妻(数位DP)
- UVa 11134 - Fabled Rooks(贪心)
- poj 2570 Fiber Network(floyd)