使用Knockout实现全选时遇到的问题

Posted 2020-10-17 small_winder

需求是这样的：
    对每个月份的数据可以实现独立全选，并不是只有一个全选。

这也是离我开始认识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比较好