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.ui.progressbar 中文文档
Nov 26 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
详解javascript replace高级用法
Feb 17 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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判断类是否存在函数class_exists用法分析
2014/11/14 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
语义化 H1 标签
2008/01/14 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python操作Excel之xlsx文件
2017/03/24 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python3常见函数range()用法详解
2019/12/30 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
硕士研究生个人求职信
2013/12/04 职场文书
学生请假条
2014/04/11 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
文秘自荐信
2014/06/28 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
职工宿舍管理制度
2015/08/05 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers