前言

checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox(<input type='checkbox'>)或者radio button(<input type='radio'>) 。当用户check关联的form表单控件的时候,view model对应的值也会自动更新,相反,如果view model的值改变了,那控件元素的check/uncheck状态也会跟着改变。

注:对text box,drop-down list和所有non-checkable的form表单控件,用value绑定来读取和写入是该元素的值,而不是checked绑定。

简单示例

示例代码

  1. <p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
  2. <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
  3. <script type="text/javascript">
  4. var viewModel = {
  5. wantsSpam:ko.observable(true)
  6. };
  7.  
  8. viewModel.wantsSpam(false);
  9. ko.applyBindings(viewModel);
  10. </script>

运行之后

对于checkbox,当参数为true的时候,KO会设置元素的状态为checked,反正设置为unchecked。如果你传的参数不是布尔值,那KO将会解析成布尔值。也就是说非0值和非null对象,非空字符串将被解析成true,其它值都被解析成false。

当用户check或者uncheck这个checkbox的时候,KO会将view model的属性值相应地设置为true或者false。

Checkbox关联到数组

  1. <p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
  2. <div data-bind="visible: wantsSpam">
  3. Preferred flavors of spam:
  4. <div>
  5. <input type="checkbox" value="cherry" data-bind="checked: spamFlavors"/> Cherry
  6. </div>
  7. <div>
  8. <input type="checkbox" value="almond" data-bind="checked: spamFlavors"/> Almond
  9. </div>
  10. <div>
  11. <input type="checkbox" value="msg" data-bind="checked: spamFlavors"/> Monosodium Glutamate
  12. </div>
  13. </div>
  14. <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
  15. <script type="text/javascript">
  16. var viewModel = {
  17. wantsSpam: ko.observable(true),
  18. spamFlavors: ko.observableArray(["cherry", "almond"])
  19. };
  20. ko.applyBindings(viewModel);
  21. viewModel.wantsSpam(false);
  22. viewModel.spamFlavors.push("msg");
  23. </script

添加radio button

  1. <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor"/> Cherry</div>
  2. <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor"/> Almond</div>
  3. <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor"/> Monosodium Glutamate</div>
  1. spamFlavor:ko.observable("cherry")

对于radio buttons,KO只有当参数值等于radio button value属性值的时候才设置元素为checked状态。所以参数应是字符串。在上面的例子里只有当view model 的spamFlavor 属性等于“almond”的时候,该radio button才会设置为checked。

当然,最有用的是设置一组radio button元素对应到一个单个的view model 属性。确保一次只能选择一个radio button需要将他们的name属性名都设置成一样的值(例如上个例子的flavorGroup值)。这样的话,一次就只能选择一个了。

如果参数是监控属性observable的,那元素的checked状态将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新。

Knockout.Js官网学习(checked 绑定)的更多相关文章

  1. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  2. Knockout.Js官网学习(value绑定)

    前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...

  3. Knockout.Js官网学习(创建自定义绑定)

    前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...

  4. Knockout.Js官网学习(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  5. Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)

    selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...

  6. Knockout.Js官网学习(event绑定、submit绑定)

    event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...

  7. Knockout.Js官网学习(click绑定)

    前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...

  8. Knockout.Js官网学习(text绑定)

    前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数.该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上. 简单绑定 Today's ...

  9. Knockout.Js官网学习(enable绑定、disable绑定)

    enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled.在form表单元素input,select,和textarea上非常有用. enable简单示例 < ...

随机推荐

  1. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

  2. opencv error: insufficient memory错误解决办法

    用opencv合成图像时出现的错误,大概4000多张会报错,在网上查阅一些博客时才知道原因.之前编译的时候用的是x86,切换到x64下可解决问题,具体: 1.项目->属性->配置管理器-& ...

  3. java多线程快速入门(二)

    通过继承Thread类来实行多线程 package com.cppdy; //通过继承Thread类来实行多线程 class MyThread extends Thread{ @Override pu ...

  4. CCF2014032窗口(C语言)

    问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的 ...

  5. hdu1517 巴什博奕变换

    //没必要递推sg,直接巴什博奕即可 /* 先手面对[n/2,n/9]必胜,即后手面对n/18必败 同理,后手面对n/18^2必败... 那么能否使后手面对n/18^k的局势,在于n/18^k是否在[ ...

  6. 使用fidder进行接口测试

    官方下载地址 下载后一路next安装即可. get请求 get请求直接把需要携带的参数使用?跟在后面如:http://127.0.0.1:8000/api/get_event_list/?id=1 p ...

  7. python 全栈开发,Day76(Django组件-cookie,session)

    昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() ...

  8. A. 【UR #16】破坏发射台

    题解: 首先看n是偶数的 那么就是不需要满足对面这个性质的 这样就可以dp了 f[i][0/1]表示dp到第i位,当前数等于或不等于第一位的方案数 然后显然可以用矩阵优化 再考虑n为奇数 用一样的思路 ...

  9. Rookey.Frame v1.0快速开发平台-整体介绍

    Rookey.Frame v1.0是一套基于.NET MVC的极速开发框架,支持简单逻辑模块零代码编程.支持二次开发,具有高扩展性.高复用性.高伸缩性. 框架特点 (1)简单逻辑模块实现零代码编程,通 ...

  10. Codeforces 594A - Warrior and Archer

    题目大意:给你在一条线上的n(偶数)个点,mike和alice 开始禁点,他们轮流开始,直到最后只剩下两个点, mike希望剩下的两个点距离尽可能小,alice希望剩下的两个点距离尽可能大,他们都采用 ...