使用Knockout实现全选时遇到的问题
来源:互联网 发布:java怎么写代码 编辑:程序博客网 时间:2024/06/05 07:42
需求是这样的:
对每个月份的数据可以实现独立全选,并不是只有一个全选。
这也是离我开始认识knockout这个东西的时间不到半个月的时间里,再次接触它。这样一个看似比较小的需求,用knockout来做却花了我不少的时间,原因可能主要还是对它不够了解,闲话少说,我们来说说遇到的主要问题在哪里?
1.对于每个对立的checkbox,比较简单,使用双向绑定chosenData。
<input type="checkbox" data-bind="checkedValue:$data, checked: $parents[1].chosenData" />
2.对于每个月份的全选,使用click事件
<input type="checkbox" data-bind="click: $parents[0].chosenMonthData, checked: $parents[0].isChosen" />
3.问题来了,由于后端对每月份的每条数据并没有带入月份字段,而是独立出来了,所以每次全选比较简单,通过concat就能实现,但是取消全选并不能通过月份来过滤,因此这里需要通过splice来解决,
使用knockout同时绑定checked和click时,checkbox点击不勾选。所以在绑定的click事件中一定要返回true;
chosenMonthData(data) { if(this.isChosen()) { this.isChosen(false); this.chosenData.splice(this.chosenData.indexOf(data.list[0]), data.list.length) }else { this.isChosen(true); this.chosenData(this.chosenData().concat(data.list)); }
return true;}
在模板文件中knockout会自动带入当前所在上下文作用域的参数$data作为chosenMonthData函数的参数,这里要注意一下,刚开始不知道,带入参数后,组件js中的所有函数都会跑一遍,
就会找不着北,加上关于knockout的文档在网上也是比较少的,所有有什么问题还是去官网找找http://knockoutjs.com/index.html比较好
阅读全文
0 0
- 使用Knockout实现全选时遇到的问题
- dojo grid遇到的问题 点击按钮“全选”'删除"无法实现
- 使用Knockout实现密码强度的验证功能
- KnockOut JS 学习中遇到的几个问题
- 使用spring全注解实现继承时遇到的问题
- 使用Knockout的注意点
- 使用jQuery1.10时复选框全选/取消全选的问题
- 用angularjs做全选和反选遇到的问题
- 关于jquery全选和取消全选遇到的只能选一次问题记录
- 使用JQuery实现全选的功能
- 使用jQuery实现复选框的全选
- 使用jquery实现全选
- html使用iframe实现伪异步表单,实现无刷新上传文件时遇到的问题
- (一)Knockout - ViewModel 的使用
- TypeScript和Knockout.js的结合使用
- 实现匿名评价时遇到的问题
- 使用伪静态实现页面跳转中遇到的问题
- 使用struts2实现下载功能遇到的文件中文问题
- request.getParameter("id").trim();
- 使用navicat premium导入数据时候,可能出现导入异常
- docker的安装
- des对称加密和解密
- flume-kafka整合--实时日志采集
- 使用Knockout实现全选时遇到的问题
- String,StringBuilder和StringBuffer在保存数据方面的区别和原因
- 转换成Date形式
- android触摸事件分发与处理简述
- EasyUI日期格式化
- centos部署postgresql
- Win7删除GRUB For DOS启动项
- 第12周项目4- 拓扑排序算法验证
- 数据结构第十一周项目一_