一、前言
楼主是个小菜鸟。之前做的项目都是用第三方控件做的,最近开始学习用MVC、EasyUI和Knockoutjs等,可能下面有些地方写的不好,请大家多多包涵。
二、内容
首先我们要了解一下基本的Knockoutjs绑定。
我是新建了一个table,主要内容有如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <table align="center"> 2 <thead> 3 <tr> 4 <th width="3%"></th> 5 <th width="20%">新闻名称</th> 6 <th width="20%">作者</th> 7 </tr> 8 </thead> 9 <tbody data-bind="foreach: News"><!--foreach:News是用来获取数组数据--> 10 <tr> 11 <td> 12 <input type="checkbox" data-bind="checked: checks"><!--checked绑定checkbox--> 13 </td> 14 <td data-bind="text: Title"></td><!--text 绑定显示对应的title值--> 15 <td data-bind="text: UsersName"></td> 16 </tr> 17 </tbody> 18 <tr> 19 <td> 20 <input type="checkbox" data-bind="checked: selectall"></td> 21 <td>全选</td> 22 <td></td> 23 <td></td> 24 <td></td> 25 <td></td> 26 </tr> 27 </table>
注:对text box,drop-down list和所有non-checkable的form表单控件,用value绑定来读取和写入是该元素的值,而不是checked绑定。(套用手册里面的话)
如上绑定结束之后就是用如下代码来实现:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 $(function () { 2 var viewModel = { 3 selectall: ko.observable(false), 4 News: ko.observableArray( 5 [ 6 { checks:false,Title: 'this is Title', UsersName: 'cccccc' }, 7 { checks:false,Title: 'hahahhahaha', UsersName: 'ssssss' } 8 ] 9 ) 10 }; 11 //监听 12 viewModel.selectall.subscribe(function (nvalue) { //subscribe是监控属性显示订阅,通过nvalue判断全选是选中,还是没选中 13 if (nvalue) { //如果选中 14 var s = viewModel.News(); 15 viewModel.News([]); 16 for (var i = 0; i < s.length; i++) { 17 s[i].checks = true; //则将列表中的check设置为true 18 } 19 viewModel.News(s); 20 } else { //如果没选 21 var s = viewModel.News(); 22 viewModel.News([]); 23 for (var i = 0; i < s.length; i++) { 24 s[i].checks = false; //则将列表中的check设置为false 25 } 26 viewModel.News(s); 27 } 28 }); 29 ko.applyBindings(viewModel); 30 });
其中显示的时候全选要为空,所以就我们就可以直接设置false
observableArray是数组所以上方用foreach绑定
注:上方绑定的名称一定要和下方统一,不然会显示不出来
结果如下: