Knockout.Js官网学习(click绑定)
前言
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。
简单示例
<h2>ClickBind</h2>
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
ko.applyBindings(viewModel);
</script>
预览效果
每次点击按钮的时候,都会调用incrementClickCounter()函数,然后更新自动更新点击次数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: someObject.someFunction。
View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写incrementClickCounter 就可以了,而无需写成: viewModel.incrementClickCounter(尽管是合法的)。
传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数:
<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }">
Click me
</button>
这样,KO就会调用这个匿名函数,里面会执行viewModel.myFunction(),并且传进了'param1' 和'param2'参数。
访问事件源对象
有些情况,你可能需要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:
<button data-bind="click: myFunction">
Click me event
</button>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
},
myFunction: function (event) {
//////
}
};
ko.applyBindings(viewModel);
</script>
如果你需要的话,可以使用匿名函数的第一个参数传进去,然后在里面调用:
<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }">
Click me
</button>
这样,KO就会将事件源对象传递给你的函数并且使用了。
允许执行默认事件
默认情况下,Knockout会阻止冒泡,防止默认的事件继续执行。例如,如果你点击一个a连接,在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model,而不是连接到另外一个页面。
当然,如果你想让默认的事件继续执行,你可以在你click的自定义函数里返回true。
防止事件冒泡
默认情况下,Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如,如果你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的。如果需要,你可以通过额外的绑定clickBubble来禁止冒泡。例如:
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>
默认情况下,myButtonHandler会先执行,然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候,冒泡事件会被禁止。
Knockout.Js官网学习(click绑定)的更多相关文章
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- Knockout.Js官网学习(event绑定、submit绑定)
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...
- Knockout.Js官网学习(创建自定义绑定)
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...
- Knockout.Js官网学习(简介)
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- Knockout.Js官网学习(value绑定)
前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...
- Knockout.Js官网学习(text绑定)
前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数.该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上. 简单绑定 Today's ...
- Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)
selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...
- Knockout.Js官网学习(模版绑定)
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
随机推荐
- types.MethodType
http://stackoverflow.com/questions/972/adding-a-method-to-an-existing-object-instance 532down voteac ...
- 用浏览器打开本地html 直接到首页 的解决方法
方法1:直接把本地文件拖到浏览器就可以打开
- Codeforces 622F 「数学数论」「数学规律」
题意: 给定n和k,求 1 ≤ n ≤ 109, 0 ≤ k ≤ 106 思路: 题目中给的提示是对于给定的k我们可以求出一个最高次为k+1的关于n的通项公式. 根据拉格郎日插值法,我们可以通过k+2 ...
- ios7 Cocos2dx 隐藏状态栏设置
环境: cocos2d-x 2.1.5 ios7.0 在info.plist 添加 UIViewControllerBasedStatusBarAppearance(View controll ...
- [模板总结] Java的一些模板
快速排序(数组a从小到大,参数1是待排序的数组,参数2是起始下标,参数3是终止下标): static void sort(int [] a, int l,int r){ int m = l+r> ...
- (转)C#picturebox控件使用
PictureBox是C#常用图片空间,本文是学习中搜集网络资料的一些整理和记录 1,PictureBox加载图片 using System.Drawing; //方式1,从图片文件载入 //下面的路 ...
- blocksit
<!DOCTYPE html> <html> <head> <title>Sc.Chinaz.Com</title> & ...
- 在 mvc 中使用下拉列表
在mvc中经常会使用到下拉列表,以下以两种方式来实现,一种是以 @Html.DropDownList 扩展方法,一种是以 <select><option></optio ...
- mysql中explain看性能
select distinct col_name from table where a=X and b=Y and date(time)='xx-xx-xx';执行时间 27.9772 秒 expla ...
- 创投女王徐新:如何迅速做到细分市场第一(FW)
http://mp.weixin.qq.com/s?__biz=MjM5NzUxNTQ2Mw==&mid=203368116&idx=2&sn=e586a2f28dfb2b50 ...