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绑定的更多相关文章

  1. KnockoutJS 3.X API 第四章 表单绑定(6) click绑定

    目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked timesClick me var viewM ...

  2. KnockoutJS 3.X API 第四章 表单绑定(7) event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...

  3. Knockout.Js官网学习(click绑定)

    前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...

  4. click 绑定(三)防止事件冒泡

     防止事件冒泡 默认情况下,Knockout允许click事件继续在更高一层的事件句柄上冒泡执行.例如,如果你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的.如果需要, ...

  5. Knockout.Js官网学习(event绑定、submit绑定)

    event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...

  6. 4.Knockout.Js(事件绑定)

    前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...

  7. KnockoutJS中父元素有click绑定引起checked绑定时失效

    KnockoutJS中的checked绑定如果父元素有click绑定,会出现状态点击没反应,实际KO的值已经变化的情况. 这种情况下应该在checked绑定的元素上除了阻止事件冒泡,另外还需要额外加上 ...

  8. KnockOut文档--模板绑定

    目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...

  9. Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)

    selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...

随机推荐

  1. BZOJ_4892_[Tjoi2017]dna_哈希

    BZOJ_4892_[Tjoi2017]dna_哈希 Description 加里敦大学的生物研究所,发现了决定人喜不喜欢吃藕的基因序列S,有这个序列的碱基序列就会表现出喜欢吃藕的 性状,但是研究人员 ...

  2. iview 菜单数据的转换,动态加载

    <template> <div class="changePassword"> <i-Menu ref="leftMenu" :t ...

  3. java线程同步小结

    1.线程同步的目的是为了防止多个线程同时访问一个资源时对资源的破坏 2.线程同步方法是通过锁来实现,每个对象都有切仅有一个锁,这个锁与一个特定的对象关联,线程一旦获取了对象锁,其他访问该对象的线程就无 ...

  4. java常用的框架介绍

    一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...

  5. Java 12 正式发布,8大新特性

    自 2 月 7 日开始,Java/JDK 12 就进入了 RC 阶段.按照发布周期,美国当地时间 3 月 19 日,也就是北京时间 20 号 Java 12 正式发布了! 1.Shenandoah:低 ...

  6. HTML 基本语法速查

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  7. 100 天从 Python 新手到大师

    Python应用领域和就业形势分析 简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支 ...

  8. Vue.js-08:第八章 - 组件的基础知识

    一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...

  9. asp.net core系列 57 IS4 使用混合流(OIDC+OAuth2.0)添加API访问

    一.概述 在上篇中,探讨了交互式用户身份验证,使用的是OIDC协议. 在之前篇中对API访问使用的是OAuth2.0协议.这篇把这两个部分放在一起,OpenID Connect和OAuth 2.0组合 ...

  10. [Hyperledger] Fabric系统中 peer模块的 gossip服务详解

    最近一直在看fabric系统中的核心模块之一——peer模块.在看peer的配置文件core.yaml的信息时,对其中的gossip配置选项很感兴趣.看了一上午,还是不能明白这个选项到底什么意思呢?表 ...