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代码
Aug 29 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
原生js调用json方法总结
Feb 22 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
wordpress之wp-settings.php
2007/08/17 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
帝国cms常用标签汇总
2015/07/06 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
js获取url传值的方法
2015/12/18 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python构建网页爬虫原理分析
2017/12/19 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
如何利用python生成MD5并去重
2020/12/07 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
求职自荐信
2013/12/14 职场文书
《猫》教学反思
2014/02/26 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
Golang实现可重入锁的示例代码
2022/05/25 Golang