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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
express 项目分层实践详解
Dec 10 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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如何解决网站大流量与高并发的问题
2011/06/25 PHP
深入apache host的配置详解
2013/06/09 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
import的本质解析
2017/10/30 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python实现拼图小游戏
2020/02/22 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
优秀班集体申报材料
2014/12/25 职场文书
活动费用申请报告
2015/05/15 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
PyTorch中permute的使用方法
2022/04/26 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android