Javascript MVVM模式前端框架—Knockout 2.1.0系列(11):内建绑定之——Enable、Value、uniqueName绑定
2013-02-07 14:32 刺客之家 阅读(1910) 评论(1) 编辑 收藏 举报*本文已经同步至索引目录:http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html
前言&基础
今天我们要学习的是另外3个内置绑定。其中2个(enable,value)是很实用的,另外一个uniqueName是为了某些特殊场景服务的。
正文
Enable Binding
我们的UI元素在很多时候可能不希望用户可以编辑,或者在达到某些条件的时候,开启/关闭DOM元素的编辑功能,这个时候,就该使用enable绑定
- 可以绑定一个bool值,或者一个可以转化为bool值的js express(表达式)。
- 如果绑定的是一个observable变量,则ko会负责跟踪变量值的变化,动态修改DOM元素的disable属性。
基本语法
Html代码
<p> Your cellphone number: <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /> </p>
Js代码
var viewModel = { hasCellphone : ko.observable(false), cellphoneNumber: "" };
Value Binding
之前我们接触过text binding,它可以绑定到DOM元素的文本内容,但是如果我们的UI元素是form的元素,特别是input,select,textarea的时候,就需要用到value binding了.
- 可以绑定一个DOM的value值,或者一个js express(表达式)。
- 如果绑定的是一个observable变量,则ko会负责跟踪变量值的变化,动态修改DOM元素的value属性。
基本语法
Html代码
<p>Login name: <input data-bind="value: userName" /></p> <p>Password: <input type="password" data-bind="value: userPassword" /></p>
Js代码
var viewModel = { userName: ko.observable(""), // 初始化为空 userPassword: ko.observable("abc"), //初始密码 };
Unique Binding
这个绑定我平时一般使用的比较少,它用来生成一个不重复的唯一的name属性。一般用于以下场景
- 在前台进行列表编辑、批量新增的时候,用于生成一个唯一键,作为编辑item的标识
- 在IE6下,radiobutton必须有name才可以下拉。
- 一些验证插件,如jquery.validate,要求DOM元素必须有name
基本语法
Html代码
<input data-bind="value: someModelProperty, uniqueName: true" />
Js代码:无
实例
Demo1:演示Enable Binding基本用法
http://jsfiddle.net/wbpmrck/LDBKS/2/embedded/
Demo2:演示Value Binding的基本用法
http://jsfiddle.net/wbpmrck/LDBKS/3/embedded/
Demo3:演示Unique Name Binding的基本用法
http://jsfiddle.net/wbpmrck/LDBKS/4/embedded/
总结
今天主要介绍了ko中的另外几种Binding的用法,前面2种大家一定要掌握~最后一个使用的场景不多~。
感谢支持
精彩的还在后面,请大家多多支持,给点动力哈~
如果本文对您有帮助的话,请别吝啬手中的推荐票哦~