需求是这样的:
对每个月份的数据可以实现独立全选,并不是只有一个全选。
这也是离我开始认识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比较好