KnockoutJS 3.X API 第四章之click绑定


Posted in Javascript onOctober 10, 2016

目的

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

例如:

You've clicked 0timesClick me

源码:

<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
</script>

如上述例子,没点过button被点击时都会触发incrementClickCounter 回调函数,从而更新视图状态。

备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click: someObject.someFunction。

备注1:传递一个参数

当您的处理程序中,UI展示了一个监控属性数组,例如:

LondonRemove
ParisRemove
TokyoRemove

源码:

<ul data-bind="foreach: places">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place to remove
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

需要注意两点:

如果你是一个嵌套在绑定上下文,例如,如果使用foreach或with绑定,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent或$root定位处理函数。
在您的视图模型,但是这是可以使用self(或其他一些变量)作为this的一个别名。

备注2:传递事件对象(多参数)

一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:

<button data-bind="click: myFunction">
Click me
</button>
<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>

如果你要传递更多的参数,可以使用函数文本的方式。例如:

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>

备注3:允许默认点击动作

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

备注4:防止冒泡事件

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

可以使用一个附加绑定clickBubble来解决该问题:

<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

备注5:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

ko.options.useOnlyNativeEvents = true;

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之click绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js获取height和width的方法说明
Jan 06 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
字节飞书面试promise.all实现示例
Jun 16 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php字符串截取函数用法分析
2014/11/25 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue实现整屏滚动切换
2020/06/29 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python发送邮件接收邮件示例分享
2014/01/21 Python
python多重继承实例
2014/10/11 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python扩展内置类型详解
2018/03/26 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
一份创业计划书范文
2014/02/08 职场文书
飞屋环游记观后感
2015/06/08 职场文书
文艺演出主持词
2015/07/01 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Python 统计序列中元素的出现频度
2022/04/26 Python