【RxSwift 实践系列 3/3】thinking in Rx- UITableView

接上期：【RxSwift 实践系列 2/3】thinking in Rx- Create和Drive的功能，我们要实现在uitableview中cell上按钮功能。同样，我们在cell上直接订阅这个按钮，当接受到点击请求的时候，UserDefaults上去

如下：

searchFiled.rx.text
            .filter{
                ($0?.lengthOfBytes(using: .utf8))! > 0 //长度大于1
            }
            .throttle(0.5, scheduler: MainScheduler.instance) //延迟0.5秒再执行
            .flatMap{
                ListViewModel().searchFromApi(repositoryName:String(describing: $0!))
            }
            .asDriver(onErrorJustReturn: [])
            .drive(resultTableView.rx.items(cellIdentifier: "SearchTableViewCell", cellType: SearchTableViewCell.self)) {
                (tableView, element, cell) in
                cell.nameLabel.text = element.name
                cell.codeLabel.text = element.code
                cell.addBtn.rx.tap.subscribe(
                    onNext: {
                        var stocks = UserDefaults.standard.array(forKey: "stockSelected")  as! [String]
                        stocks.append(element.code)
                        UserDefaults.standard.set(stocks, forKey: "stockSelected")
                        cell.addBtn.setTitle("已关注", for: .normal)
                    }
                    ).disposed(by: rx.disposeBag) 
            }
            .disposed(by: rx.disposeBag)

但是实际操作上发现问题了，当搜索框输入在不断变化的时候,cell也是在不断的刷新的，cell重用的时候，按钮就会被多次订阅，造成严重的bug。这里就要用到一个方法：prepareForReuse

    private(set) var disposeBag = DisposeBag()
    //SearchTableViewCell中实现
    override func prepareForReuse() {
        super.prepareForReuse()
        disposeBag = DisposeBag()
    }

在每次重用cell的时候，我们会释放之前的disposeBag，然后会为cell创建一个新的disposeBag对象，避免多次订阅.

cell.addBtn.rx.tap.subscribe(
        onNext: {
            var stocks = UserDefaults.standard.array(forKey: "stockSelected")  as! [String]
            stocks.append(element.code)
            UserDefaults.standard.set(stocks, forKey: "stockSelected")
            cell.addBtn.setTitle("已关注", for: .normal)
        }
        ).disposed(by: cell.disposeBag)//注意，这里是cell的disposeBag

这样我们就实现了cell上按钮的实现。

image.png

最后就是首页列表展示了，首页的展示和搜索列表一样，这里就不啰嗦了，这里有个难点是，股票的价格在不刷新tableview的情况下更新，在平常的实现里我们只能使用刷新单个cell来实现了，来看看rx的实现方式：

ListViewModel().getFromApi(repositoryName: "").subscribe(
    onNext:{ rs in Observable<[ListModel]>
        .just(rs)
        .bind(to: self.resultTableView.rx.items(cellIdentifier: "ListTableViewCell", cellType: ListTableViewCell.self)) {(_, model:ListModel, cell:ListTableViewCell) in
            
            //定时任务每两秒执行一次
            Observable.interval(2, scheduler: MainScheduler.instance).subscribe { (event) in
                ListViewModel().getOne(repositoryName: model.symbol)
                .subscribe(
                    onNext:{ rs in Observable
                        .just(rs)
                        .subscribe{
                            cell.currentLabel.text = String(describing: rs.current)
                            cell.nameLabel.text = rs.name
                            cell.codeLabel.text = rs.code
                        }.disposed(by: self.rx.disposeBag)
                    }
                ).disposed(by: self.rx.disposeBag)
            }.disposed(by: self.rx.disposeBag)
        }.disposed(by: self.rx.disposeBag)
    }
).disposed(by: rx.disposeBag)

在绑定的cell里面，对整个cell做一个定时任务interval，每秒获取一次网络数据，订阅这个数据来更新cell的元素，从而实现了cell无刷新的更新。可以说代码上只增加了3行就实现了这个功能！

image.png

这个用rxSwift实现的添加股票代码实时刷新价格的应用到这里就完成了，可以在这里找到实例代码。

代码里面还有很多缺陷和需要优化的地方：
比如很多的if else可以用rxSwift做的更简洁、许多错误异常等并没有处理，网络授权的提示、添加股票代码后首页并没有及时更新。大家可以尝试着用rxSwift继续优化代码。

三期链接：

【RxSwift 实践系列 1/3】为什么使用RxSwift

【RxSwift 实践系列 2/3】thinking in Rx- Create和Drive

【RxSwift 实践系列 3/3】thinking in Rx- UITableView