KnockOut绑定之Click绑定
example(click绑定)
Click绑定对DOM元素添加一个函数,当DOM元素被点击的时候调用。在button,input 或者a标签中常用,但其实他适用于任何可见的DOM元素。
每当你点击button按钮的时候,viewModel 里面的incrementClickCounter()
函数被调用,然后更新
numberOfClicks 的值,然后更新界面
我们可以调用任何javaScript函数,可以不在view model里面,也可以以someObject.someFunction的形式调用函数。
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <script src="~/Scripts/knockout-3.2.0.js"></script>
- <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(),
- incrementClickCounter: function () {
- var previousCount = this.numberOfClicks();
- this.numberOfClicks(previousCount + );
- }
- };
- ko.applyBindings(viewModel);
- </script>
example(传递本身绑定值作为参数)
在这个例子中有两点要注意:
- 如果是在一个嵌套的绑定上下文,例如在一个foreach绑定,或者with块绑定,但是你要调用viewmodel下面的函数,这时候你需要一个调用当前节点的父节点,或者直接调用根节点去访问需要调用的函数,语法父节点用$parent,根节点用$root;
- viewmodel里面用把this用一个self变量表示,相当于this的别名,防止在一些情况下引起的作用域链混乱;
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <script src="~/Scripts/knockout-3.2.0.js"></script>
- <ul data-bind="foreach: places">
- <li>
- <!--foreach里面上下文是每一个place,可以用$data来表示当前项的值-->
- <span data-bind="text: $data"></span>
- <!--这儿也在foreach里面,所以click绑定对应的上下文也是$data,然后用$parent来调用其父项目,也就是viewModel,然后调用里面的removePlace函数-->
- <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']);
- //当前项的值会被传递过来作为第一个参数,所以我们知道数组里面的哪一项被移除
- self.removePlace = function (place) {
- self.places.remove(place)
- }
- }
- ko.applyBindings(new MyViewModel());
- </script>
example(把事件传递给click调用的函数)
这个例子展示了给把事件句柄传递给函数,其中data指的是绑定上下文的值,其实也是指上个例子中的place
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <script src="~/Scripts/knockout-3.2.0.js"></script>
- <button data-bind="click: myFunction">点击</button>
- <script type="text/javascript">
- var viewModel = {
- //这儿的data,就是上个例子中我们传递过去绑定上下文的值
- myFunction: function (data, event) {
- if (event.shiftKey) {
- //这儿对于click事件来说一般用不到,因为已经确定是click 事件了。
- alert("shift");
- } else {
- //执行点击时操作
- alert("normal");
- }
- }
- };
- ko.applyBindings(viewModel);
- </script>
example(传递任意参数给调用函数)
- <span style="font-size:14px;"><div data-bind="click:changeEditor($index)"></div>
- </span>
// 将导致函数在初始化时,点击事件changeEditor()函数就被调用 这种写法是错误的!
如果你想传任意的参数给调用函数,你可以用一个函数字面量来作为一个参数,意思就是说,click后面你可以传递任何javascript变量,因为javascript语法的特殊形式,一个函数也能作为变量传递,所以可以直接在click后面写一个匿名函数,然后在该函数里面直接调用你想到调用的函数,同时把参数传递过去。
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <script src="~/Scripts/knockout-3.2.0.js"></script>
- <button data-bind="click: myFunction">点击</button>
- <button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
- Click me
- </button>
- <script type="text/javascript">
- var viewModel = {
- myFunction: function (parameter1, parameter2, parameter3, parameter4) {
- }
- };
- ko.applyBindings(viewModel);
- </script>
除了用函数字面量的这种办法,我们还可以用另一种办法,用knockout的绑定函数,语法为函数名.bing(里面可以传递参数);
- <button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
- Click me
- </button>
阻止DOM元素的默认事件
默认情况下,当你对一个DOM元素绑定一个click事件后,当你点击的时候,他只会执行你的click事件,不会执行该DOM元素的默认事件。例如a标签,当你给他绑定了一个事件后,点击,执行绑定事件,但是他不会跳转该a标签指向的连接,如果你想让它继续执行,可以返回一个true;
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <script src="~/Scripts/knockout-3.2.0.js"></script>
- <a href="http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')">
- Click me
- </a>
- <script type="text/javascript">
- var viewModel = {
- myFunction: function (parameter1, parameter2, parameter3, parameter4) {
- alert();
- //这儿如果你不return true,就不会跳转
- //return true;
- }
- };
- ko.applyBindings(viewModel);
- </script>
阻止事件冒泡
阻止事件冒泡,用如下语法
- <div data-bind="click: myDivHandler">
- <button data-bind="click: myButtonHandler, clickBubble: false">
- Click me
- </button>
- </div>
KnockOut绑定之Click绑定的更多相关文章
- KnockoutJS 3.X API 第四章 表单绑定(6) click绑定
目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked timesClick me var viewM ...
- KnockoutJS 3.X API 第四章 表单绑定(7) event绑定
目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...
- Knockout.Js官网学习(click绑定)
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...
- click 绑定(三)防止事件冒泡
防止事件冒泡 默认情况下,Knockout允许click事件继续在更高一层的事件句柄上冒泡执行.例如,如果你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的.如果需要, ...
- Knockout.Js官网学习(event绑定、submit绑定)
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...
- 4.Knockout.Js(事件绑定)
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...
- KnockoutJS中父元素有click绑定引起checked绑定时失效
KnockoutJS中的checked绑定如果父元素有click绑定,会出现状态点击没反应,实际KO的值已经变化的情况. 这种情况下应该在checked绑定的元素上除了阻止事件冒泡,另外还需要额外加上 ...
- KnockOut文档--模板绑定
目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...
- Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)
selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...
随机推荐
- 【cogs 775】山海经 ——Segment Tree
题目链接: TP 题解: 我数据结构真心是弱啊= =. 线段树好厉害啊,一直不会区间最大连续和,今天刚学习了一下233. 维护前缀最大和后缀最大,越界最大(?),再维护一个区间最大,瞎搞 ...
- Spring中bean的注入方式
首先,要学习Spring中的Bean的注入方式,就要先了解什么是依赖注入.依赖注入是指:让调用类对某一接口的实现类的实现类的依赖关系由第三方注入,以此来消除调用类对某一接口实现类的依赖. Spring ...
- Python数据结构应用2——Queue
Reference: Problem Solving with Algorithms and Data Structures, Release 3.0 队列 Queue 建立 class Queue: ...
- C# Vista Command Link Control with Windows Forms
using System; using System.Text; using System.Windows.Forms; using System.Runtime.InteropServices; u ...
- Hadoop3.0 WordCount测试一直Accept 状态,Nodes of the cluster 页面node列表个数为0
起因是我运行wordcount测试一直卡主,不能执行,一直处于 Accept 状态,等待被执行,刚开始是各种配置yarn参数,以及host配置,后来发现还是不行 hadoop 集群安装完成后,在500 ...
- 8天入门docker系列 —— 第四天 使用aspnetcore小案例熟悉端口映射和挂载目录
到目前为止大家应该对镜像和容器有了一个大概认知,而且也用了docker进行了一个简单化的部署,但仔细一看问题还有很多,所以这篇我们继续完善. 一:如何让外网访问到容器内应用 我们知道容器内拥有自己的子 ...
- 安卓开发笔记(三十):自定义Button
在笔者本人看了很多博客和书之后,发现很少博主对于自定义控件能够进行一个比较全面的思路讲解,大多数都是只讲了一些细节,但并没有讲如何把代码进行整体的实现.因此这里讲讲整体的自定义button实现的详细过 ...
- Scala 隐式转换及应用
什么是隐式转换 我们经常引入第三方库,但当我们想要扩展新功能的时候通常是很不方便的,因为我们不能直接修改其代码.scala提供了隐式转换机制和隐式参数帮我们解决诸如这样的问题. Scala中的隐式转换 ...
- unison+inotify的Web目录同步方案
1.在Linux下做WEB目录文件同步 一般有如下几种方式: ----------------------------------------------- 1) nfs实现web数据共享 ...
- 网络协议 终章 - GTP 协议:复杂的移动网络
前面都是讲电脑上网的情景,今天我们就来认识下使用最多的移动网络上网场景. 移动网络的发展历程 你一定知道手机上网有 2G.3G.4G 的说法,究竟这都是什么意思呢?有一个通俗的说法就是 ...