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)超链接
随机推荐
- vue 状态管理vuex(九)
通过props 及 $emit在父子组件通讯,对应频繁更新状态考虑使用vuex store.js export default { // 存储状态值 state: { count: 0 }, // 状 ...
- webstorm中.vue报错(es6语法报错)-转
1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...
- jq二级目录
CSS:.qsc_nav_main .level1 { text-align: center; height: auto; } .qsc_nav_main .level1 a { display: i ...
- inventor安装失败怎样卸载安装inventor 2019?
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- 性能测试工具LoadRunner27-LR之读取Excel数据
为何要读取Excel数据? 很多用户喜欢用Excel来统计数据,比如学生成绩表.个人信息等.有时需要把Excel中的数据来进行参数化,数据量比较多时,一个个在LR里输入是不现实的,因此需要用LR来导入 ...
- python3+Appium自动化11-data数据封装之python读取csv文件
使用背景 实际项目中,我们的测试数据可能存储在一个数据文件中,如txt.excel.csv文件类型.我们可以封装一些方法来读取文件中的数据来实现数据驱动 enumerate()简介 enumerate ...
- jemeter排至数据库时报:Access denied for user 'root'@'localhost' (using password:YES) 解决方案
相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...
- .NET MVC强类型参数排除和包含属性
MVC接收强类型对象时排除或只接收某几个属性时可使用Bind特性: Bind(Include="属性");如果相包含多个属性可以用逗号分割符分开:Bind(Include=&quo ...
- MVC切片编程
在商城网站中,用户中心的每个页面都要几乎都要涉及对用户是否登录的判断,为了减少代码重写,可采用切片编程 using System; using System.Collections.Generic; ...
- Props 和 IActorRef 3
在Actor模式中我们使用IActorRef通过ActorSystem来发送消息数据.这么做有两个理由 1.ActorSystem会在消息中封装一些元数据(metadata),这些数据我们可以通过上下 ...