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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
微信小程序实现购物车小功能
Dec 30 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
无线电的诞生过程
2021/03/01 无线电
php桌面中心(二) 数据库写入
2007/03/11 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
通俗讲解python 装饰器
2020/09/07 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
2014年医院科室工作总结
2014/12/20 职场文书
国家助学金感谢信
2015/01/21 职场文书
2015年中秋节主持词
2015/07/30 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫