码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-13 23:34:59      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:ret   cli   color   out   checked   list   绑定   data-bind   全选   

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


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

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

标签:ret   cli   color   out   checked   list   绑定   data-bind   全选   

原文地址:http://www.cnblogs.com/longtengfly/p/8034714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!