使用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比较好