Knockout.Js官网学习(event绑定、submit绑定)
event绑定
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。
简单示例

<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" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails:function() {
this.detailsEnabled(true);
},
disableDetails:function () {
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
</script>

就是通过在一个div上绑定两个事件,一个鼠标点上去的mouseover让下面的div内容显示出来,另一个是鼠标移出mouseout让下面的div内容再隐藏。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: event: { mouseover: someObject.someFunction }。
View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写event: { mouseover: enableDetails } 就可以了,而无需写成: event: { mouseover: viewModel.enableDetails }(尽管是合法的)。
submit绑定
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个,使用 submit绑定就是为了处理view model的自定义函数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。
submit简单示例
<form data-bind="submit: doSomething"> ... form contents go here ...
<input type="text" value="1" id="test"/>
<button type="submit">Submit</button>
</form>
简单的UI元素
doSomething: function (formElement) {
alert(formElement[0].outerHTML);
}
简单的viewModel属性
总共有两个元素一个是录入框,另一个是submit提交按钮
在form上,你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为,比如在输入框里输入回车的时候可以提交表单。
Knockout.Js官网学习(event绑定、submit绑定)的更多相关文章
- Knockout.Js官网学习(创建自定义绑定)
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)
selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Knockout.Js官网学习(enable绑定、disable绑定)
enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled.在form表单元素input,select,和textarea上非常有用. enable简单示例 < ...
- Knockout.Js官网学习(html绑定、css绑定)
Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...
- Knockout.Js官网学习(简介)
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- Knockout.Js官网学习(click绑定)
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...
- Knockout.Js官网学习(value绑定)
前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...
随机推荐
- 关于在页面总嵌入iframe,ifram中发起请求,服务器端的session为空问题解决
本文抄袭:http://blog.csdn.net/ray_adon/article/details/6960724 在做项目是 是用了iframe,iframe发起ajax请求,服务器端报sessi ...
- ElasticSearch的 Query DSL 和 Filter DSL
Elasticsearch支持很多查询方式,其中一种就是DSL,它是把请求写在JSON里面,然后进行相关的查询. Query DSL 与 Filter DSL DSL查询语言中存在两种:查询DSL(q ...
- HashCode equals
HashCode: hashcode就是一个签名.当两个对象的hashcode一样时,两个对象就有可能一样.如果不一样的话两个对象就肯定不一样.一般用hashcode来进行比较两个东西是不是一样的,可 ...
- .NET基础操作回顾_使用ADO.NET操作SqlServer使用的类
有些工具用的久了或者有新工具出现后,就慢慢的遗忘了很多,它们从熟悉的变成陌生,当然,对于我们来说不是好事吧. 今天回顾一下ADO.NET用到的MS的基础类库,先上代码(标准的SqlServer操作) ...
- Flex 医疗行程图
================================================ 病案的质量控制: 1.医生自检,主任检测,病案室检测达到三级检测 2.人工检测,自动检测 3.抽检(采 ...
- 搭建基于Windows + Apache + PHP + MySQL的Moodle平台
说起Moodle,我相信学习教育技术的同学应该都不陌生,在大学的网络与远程教育课中,我有幸与传说中的Moodle相遇,然后相知,但是我绝对不会跟你们说一直到我毕业,我都没有找到一个合适的时间与这位Ms ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- SASS使用总结
简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...
- JS实现联想输入(二)
JS实现联想输入(一)是主要针对单列结构的JSON格式的数据的,如果想满足多列结构的JSON格式的数据,也是非常容易的,其解决方案有至少有三种选择: 1:在后台Action方法中将多列的值拼成单列结构 ...
- 开源项目:网页实时通信WebRTC
参考资料 [博客系列] Android WebRTC 音视频开发总结 [环境编译] WebRTC入门指南 各平台WebRTC源码网盘下载 Ubuntu14.04编译WebRTC For Android ...