RxSwift（14）— MVVM双向绑定

就问此时此刻还有谁？45度仰望天空，该死！我这无处安放的魅力！

• RxSwift（1）— 初探
• RxSwift（2）— 核心逻辑源码分析
• RxSwift（3）— Observable序列的建立方式
• RxSwift（4）— 高阶函数（上）
• RxSwift（5）— 高阶函数（下）
• RxSwift（6）— 调度者-scheduler源码解析（上）
• RxSwift（7）— 调度者-scheduler源码解析（下）
• RxSwift（8）— KVO底层探索（上）
• RxSwift（9）— KVO底层探索（下）
• RxSwift（10）— 场景序列总结
• RxSwift（11）— dispose源码解析
• RxSwift（12）— Subject即攻也守
• RxSwift（13）— 爬过的坑
• RxSwift（14）— MVVM双向绑定

---

RxSwift 目录直通车 --- 和谐学习，不急不躁！

---

1、首先面向开发咱们看看RxSwift在TableView的应用

/// tableView -- RX
func setupTableViewRX() {
    let dataOB = BehaviorSubject.init(value: self.viewModel.dataArray)
    // 骚起来
// dataOB.bind(to: self.tableView.rx.items){(tabView,row,model) ->LGTableViewCell in
// let cell = tabView.dequeueReusableCell(withIdentifier: resuseID) as! LGTableViewCell
// cell.setUIData(model as! LGModel)
// return cell
// }.disposed(by: disposeBag)
    
    dataOB.asObserver().bind(to: self.tableView.rx.items(cellIdentifier: resuseID, cellType: LGTableViewCell.self)){
        (row,model,cell) in
        cell.setUIData(model as! LGModel)
    }.disposed(by: self.disposeBag)
    
    // tableView点击事件
    tableView.rx.itemSelected.subscribe(onNext: { [weak self](indexPath) in
        print("点击\(indexPath)行")
        self?.navigationController?.pushViewController(LGSectionViewController(), animated: true)
        self?.tableView.deselectRow(at: indexPath, animated: true)
    }).disposed(by: self.disposeBag)
    
    // tableView复选点击事件
    tableView.rx.itemDeselected.subscribe(onNext: { (indexPath) in
        print("再次点击\(indexPath)行")
    }).disposed(by: self.disposeBag)
    
    // tableView移动事件
    tableView.rx.itemMoved.subscribe(onNext: { [weak self] (sourceIndex,destinationIndex) in
        print("从\(sourceIndex)移动到\(destinationIndex)")
        self?.viewModel.dataArray.swapAt(sourceIndex.row, destinationIndex.row)
        self?.loadUI(obSubject: dataOB)
    }).disposed(by: self.disposeBag)
    
    // tableView删除事件
    tableView.rx.itemDeleted.subscribe(onNext: { [weak self](indexPath) in
        print("点击删除\(indexPath)行")
        self?.viewModel.dataArray.remove(at: indexPath.row)
        self?.loadUI(obSubject: dataOB)
    }).disposed(by: self.disposeBag)
    
    // tableView新增事件
    tableView.rx.itemInserted.subscribe(onNext: { [weak self](indexPath) in
        print("添加数据在\(indexPath)行")
        guard let model = self?.viewModel.dataArray.last else{
            print("数据有问题,没法新增")
            return
        }
        self?.viewModel.dataArray.insert(model, at: indexPath.row)
        self?.loadUI(obSubject: dataOB)
    }).disposed(by: self.disposeBag)    
}
复制代码

• TableView的点击、复选、新增、删除、移动所有简洁实现
• RxSwift一旦赶上了TableView,根本不须要那些恶心的胶水代码
• delegate & dataSource的赋值直接免去
• 胶水代理以及数据源代理的实现（毕竟咱们如今列表界面愈来愈多，胶水的代码的优化，太爽了）
• 咱们全部的事件订阅都在相应地方，咱们更容易管理
• 函数式回调致使咱们的逻辑代码与功能代码绑定在一块，可读性更强

2、分组的TableView

/// Rx 处理分组
func setupTableViewRX() {
    let tableViewDataSource = RxTableViewSectionedReloadDataSource<SectionModel<String,LGSectionModel>>(configureCell: { [weak self](dataSource, tab, indexPath, model) -> LGTableViewCell in
        let cell = tab.dequeueReusableCell(withIdentifier: self?.resuseID ?? "resuseID_LGSectionViewController", for: indexPath) as! LGTableViewCell
        cell.setUISectionData(model)
        cell.selectionStyle = .none
        return cell
    },titleForHeaderInSection: { dataSource,index -> String in
        // print("数据:\(dataSource.sectionModels[index].identity)")
        return dataSource.sectionModels[index].model
    })

    /// 咱们上次就是经过bind函数,这里咱们变化一下
    self.data.githubData.asDriver(onErrorJustReturn: [])
        .drive(self.tableView.rx.items(dataSource: tableViewDataSource))
        .disposed(by: self.disposeBag)
    
    /// 跳转到网络相关Demo
    self.tableView.rx.itemSelected.subscribe(onNext: { [weak self](indexPath) in
        self?.navigationController?.pushViewController(LGNetworkViewController(), animated: true)
    }).disposed(by: self.disposeBag)
}
复制代码

• RxCocoa封装的dataSourcer让咱们爽的没法自拔
• dataSource的承担了整个数据源代理，而且强势封装了代理
• 数据层的响应直接绑定到了UI，让数据更简单传输
• 从上面的代码一眼就能看出，RxSwift让咱们的开发更直接面向开发，让开发更容易

MVVM双向绑定

override func viewDidLoad() {
    super.viewDidLoad()
    self.setupUI()
    // 如今来一个需求:咱们的输入框搜索 - 请求网络 - 下面tableView联动
    // UI <-> model
    self.searchBar.rx.text.orEmpty
        .bind(to: self.viewModel.searchTextOB)
        .disposed(by: disposeBag)
    
   // 数据层绑定UI
    self.viewModel.searchData.drive(self.tableView.rx.items){ (tableView, indexPath, model) -> LGTableViewCell in
        let cell = tableView.dequeueReusableCell(withIdentifier: self.resuseID) as! LGTableViewCell
        cell.nameLabel.text  = model.name
        cell.classLabel.text = model.url
        return cell
    }
    .disposed(by: disposeBag)
    
    // tittle绑定
    self.viewModel.searchData.map { (array) -> String in
        return "搜索到了 \(array.count) 条数据"
    }
    .drive(self.navigationItem.rx.title)
    .disposed(by: disposeBag)
    
    // 滑动减速绑定
    self.tableView.rx.didEndDecelerating
        .subscribe { [weak self] in
            self?.searchBar.endEditing(true)
    }.disposed(by: disposeBag)
}
复制代码

• 这里就是咱们RxSwift世界里的ViewController,这才是真正的轻量化的VC,至始至终都只作一件事：创建View与ViewModel之间的绑定依赖关系
• 经过咱们搜索栏的响应，发送数据给咱们的ViewModel,让它在它的世界里处理业务层，网络层数据的返回
• 经过ViewModel响应对外，达到数据绑定到UI的效果
• 在ViewModel里面咱们运用RxSwift的高阶函数，处理逻辑

lazy var searchData: Driver<[LGReposityModel]> = {
    return self.searchTextOB.asObserver()
        .throttle(RxTimeInterval.milliseconds(300), scheduler: MainScheduler.instance)
        .distinctUntilChanged()
        .flatMapFirst(LGComprehensiveViewModel.resposeData)
        .asDriver(onErrorJustReturn: [])
}()
复制代码

• UI事件搜索的响应传入，经过一个懒加载的数据返回
• 这个响应的序列经过throttle保证了相隔0.3秒发送一次事件
• distinctUntilChanged函数保证了带宽，直到搜索字眼变更的时候才请求
• flatMapFirst由于序列的序列，咱们下沉请求，回调结果
• asDriver包装成Drive序列，保证状态共享，主线程调度，没有错误返回

static func resposeData(_ githunId: String) -> Observable<[LGReposityModel]> {
    guard !githunId.isEmpty,let url = URL(string: "https://api.github.com/users/\(githunId)/repos") else {
        return Observable.just([])
    }
    
   return URLSession.shared.rx.json(url: url)
            .retry()
            .observeOn(ConcurrentDispatchQueueScheduler(qos: .background))
            .map(LGComprehensiveViewModel.parseData)
}
复制代码

• 经过上面的响应，这里封装网络URLSession.shared.rx.json,返回json
• 为了保证请求网络在子线程，这里调用observeOn
• 请求回来的数据还不是咱们所想要的，这里map映射，下沉的序列化结果

static func parseData(_ json: Any) -> [LGReposityModel] {
    guard let items = json as? [[String: Any]] else {return []}
    guard let result = [LGReposityModel].deserialize(from: items) else { return [] }
    return result as! [LGReposityModel]
}
复制代码

• 这里就是普通的判空，而后经过HandJSON进行数据解析
• 返回的结果序列成模型数组，而后返回响应
• 响应层层下发，数据层层处理上升
• 根据外界的关系，完美实现双向绑定

完美实现联动，MVVM双向绑定加入RxSwift的身影也就更出色

• 当北京赶上西雅图
• 当爱情赶上婚姻
• 当兴趣赶上事业
• 当MVVM赶上RxSwift
• 个人天一切的一切都是那么的美好，安逸~~~舒服！！！

全部的努力都会在某一个时刻兑现，咱们不少小伙伴都会感叹怎么还不来！你要知道：毋庸置疑，好的事情总会到来，当他来晚的时候也不失为一种惊喜

就问此时此刻还有谁？45度仰望天空，该死！我这无处安放的魅力！