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实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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/10/09 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php之Memcache学习笔记
2013/06/17 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
不可错过的十本Python好书
2017/07/06 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
六行python代码的爱心曲线详解
2019/05/17 Python
自定义django admin model表单提交的例子
2019/08/23 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
关于做家务的心得体会
2016/01/23 职场文书
python实现三次密码验证的示例
2021/04/29 Python