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事件写法实现代码
Jan 07 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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实现计数器方法小结
2015/01/05 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
jQuery使用方法
2017/02/04 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
python异步任务队列示例
2014/04/01 Python
Python模拟三级菜单效果
2017/09/11 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Django框架封装外部函数示例
2019/05/28 Python
python 如何引入协程和原理分析
2020/11/30 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
供货协议书范本
2014/04/22 职场文书
销售团队口号大全
2014/06/06 职场文书
企业精神口号
2014/06/11 职场文书
2015年电工工作总结
2015/04/10 职场文书
简爱读书笔记
2015/06/26 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书