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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
一分钟理解js闭包
May 04 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
Vue和Flask通信的实现
May 19 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
让浏览器崩溃的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 变量定义和变量替换的方法
2009/07/30 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python 输出所有大小写字母的方法
2019/01/02 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
新闻专业个人求职信
2013/12/19 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
学习十八大宣传标语
2014/10/09 职场文书
授权收款委托书范本
2014/10/10 职场文书
检讨书格式
2015/01/23 职场文书
售后服务质量承诺书
2015/04/29 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers