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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
vue中axios封装使用的完整教程
Mar 03 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php后门URL的防范
2013/11/12 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
看了就知道什么是JSON
2007/12/09 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Cython 三分钟入门教程
2009/09/17 Python
win7安装python生成随机数代码分享
2013/12/27 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python进阶教程之动态类型详解
2014/08/30 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
《草原》教学反思
2014/02/15 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL