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


Posted in Javascript onOctober 10, 2016

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。

submit绑定目的

submit绑定即为提交绑定,通常用于form元素。这种绑定方式会打断默认的提交至服务器的操作。转而提交到你设定好的提交绑定回调函数中。如果要打破这个默认规则,只需要在回调函数中返回true即可

例如:

<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
var viewModel = {
doSomething : function(formElement) {
// ... now do something
}
};
</script>

在回调函数中,你可以做很多事情,比如前端数据验证if ($(formElement).valid()) { /* do something */ }。等等。

enable绑定目的

enable绑定主要用于DOM元素的启用禁用状态,通常用于input,select或者textarea。例如:

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

I have a cellphone

Your cellphone number:

源码:

<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone
</p>
<p>
Your cellphone number:
<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>
<script type="text/javascript">
var viewModel = {
hasCellphone : ko.observable(false),
cellphoneNumber: ""
};
</script>

disable绑定目的

disable绑定与enable绑定整好相反,你可以参考enable。

Javascript 相关文章推荐
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
Element Notification通知的实现示例
Jul 27 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 #Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
javascript常用功能汇总
2015/07/05 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
简单实现python爬虫功能
2015/12/31 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
大学生职业生涯规划书模版
2013/12/30 职场文书
经管应届生求职信范文
2014/05/18 职场文书
学雷锋标语
2014/06/25 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
公安机关起诉意见书
2015/05/20 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
Python django中如何使用restful框架
2021/06/23 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers