KnockoutJS 3.X API 第四章之事件event绑定

目的

event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数。例如keypress,mouseover或者mouseout等

例如:

Mouse over me

源码:

<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
</script>

如上述例子,当鼠标指针移入或者移出Mouse over me时,对于detailsEnabled的值设定true或者false。进而控制Details的显示和隐藏。

和click一样,event后边所跟的格式一般为:event { mouseover: someObject.someFunction },其中的回调函数并不一定非要是视图模型的函数,他可以时任何对象的函数。

备注1:传递一个当前项目作为参数

London
Paris
Tokyo
You seem to be interested in:

源码:

<ul data-bind="foreach: places">
<li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
</ul>
<p>You seem to be interested in: <span data-bind="text: lastInterest"> </span></p>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.lastInterest = ko.observable();
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

// The current item will be passed as the first parameter, so we know which place was hovered over
self.logMouseOver = function(place) {
self.lastInterest(place);
}
}
ko.applyBindings(new MyViewModel());
</script>

需要注意,如果你使用的是嵌套绑定上下文,比如foreach或者with,而需要处理的回调函数在视图模型中或者在父模型中,需要使用$parent或者$root前缀来进行绑定

与click绑定一样,给this取个别名比较好。

备注2:传递多个参数

此处请参考click绑定:

<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>

封装多参数示例:

<div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
Mouse over me
</div>

使用bind函数示例:

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

备注3:允许默认动作

同click绑定一样,ko禁止默认动作,比如你将event的keypress事件绑定到一个Input元素上,那这个input元素输入的值将会被keypress回调占用而无法输入任何信息。解决方案很简单,就是在回调函数中返回true即可。

备注4:防止冒泡事件

如果要防止冒泡事件,可以直接在事件绑定后附加一个youreventBubble绑定。将该附加绑定设置为false则禁止冒泡事件的发生,例如:

<div data-bind="event: { mouseover: myDivHandler }">
<button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
Click me
</button>
</div>

备注5:Jquery互动

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

时间: 2016-10-08

KnockoutJS 3.X API 第四章之数据控制流foreach绑定

foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素. 当然,也可以配合其他控制流一起适用,例如if和with. 示例1:遍历监控属性数组 本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容 <table> <thead> <tr&g

KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似.可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素. 示例1 该例展示IF绑定的动态删除添加DOM: Display message UI源码: <label><input type="checkbox" data-bind=&qu

KnockoutJS 3.X API 第四章之数据控制流with绑定

with绑定的目的 使用with绑定的格式为data-bind="with:attribute",使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定.with绑定内部的所有元素将受到该上下文的约束. 当然,with绑定也可配合if或foreach绑定一起使用. 示例1 <h1 data-bind="text: city"> </h1> <p data-bind="with: coords"> Lati

KnockoutJS 3.X API 第四章之表单value绑定

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容. 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上. 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定. 额外的好

KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中返回true即可. 例如: <form

KnockoutJS 3.X API 第四章之数据控制流component绑定

一个例子 UI源码: <h4>First instance, without parameters</h4> <div data-bind='component: "message-editor"'></div> <h4>Second instance, passing parameters</h4> <div data-bind='component: { name: "message-edito

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

目的 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&q

KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,textinput绑定是实时更新的. 例如: 源码: <p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="pa

BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得

BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己

BootstrapTable+KnockoutJS相结合实现增删改查解决方案(三)两个Viewmodel搞定增删改查

前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTa

BootStrap实现带有增删改查功能的表格(DEMO详解)

前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家. 表格封装了3个版本,接下来给大家展示一下样式和代码. 版本一 1. 样式 表格布局: 添加:添加一行新的空白代码 修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态. 2.代码 @using Dat

jQuery实现对网页节点的增删改查功能示例

本文实例讲述了jQuery实现对网页节点的增删改查功能.分享给大家供大家参考,具体如下: 前面介绍过<JavaScript针对网页节点的增删改查用法>,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <

Mybatis开发环境搭建实现数据的增删改查功能

config.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 拿到数据库

JS结合bootstrap实现基本的增删改查功能

提出问题:如何利用原生的js实现基本的增删改查功能??? 解决问题 假如你已经对JS有一定基础 假如你对bootstrap有一定基础 下面是具体的例子, 包含两个文件(index.jsp  和  index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC

Jquery与Bootstrap实现后台管理页面增删改查功能示例

使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及打包,该例子零耦合,开箱即用. 先看Demo: 一.用到的Jquery功能 1.获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val("user_id");/

Mybatis 条件查询 批量增删改查功能

模糊查询: @Select({ "SELECT * FROM account where account like CONCAT('%',#{query},'%') or email like CONCAT('%',#{query},'%')" }) Account findAccountByAccountOrMail(@Param("query") String query); 批量添加: @Insert({ "<script>"

C#实现XML文档的增删改查功能示例

本文实例讲述了C#实现XML文档的增删改查功能.分享给大家供大家参考,具体如下: 1. 创建实例XML文件(Books.xml) <?xml version="1.0" encoding="iso-8859-1"?> <bookstore> <book id="1" category="COOKING"> <title lang="en">Everyday I