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下function声明一些小结
Dec 28 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
javascript实现倒计时效果
Feb 17 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP打印输出函数汇总
2016/08/28 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python金融数据可视化汇总
2017/11/17 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
精神病医院见习报告
2014/11/03 职场文书
高三英语教学计划
2015/01/23 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers