什么是双向绑定？双向绑定是View与Model之间的一种相互响应的关系。
下面👇以一个Demo实战来体验一下双向绑定带来的快感！！！
Demo要实现的功能比较简单：在搜索框中输入搜索内容 -> 发起网络请求获取搜索结果 -> 在tableView中展示搜索结果。
PS：UI代码请小伙伴随意脑补，就不赘述啦
1、创建ViewModel
在UI搭建好之后，需要创建一个ViewModel类，来响应UI的变化。
class BOViewModel: NSObject {
// 响应SearchBar的输入
let searchTextOB = BehaviorSubject(value: "")
}
添加属性 searchTextOB 来响应输入框的输入变化，同时为了能在收到响应后，发起网络请求，所以使用了 BehaviorSubject类型。毕竟，Subject 类型可以是序列，也可以是观察者。
2、绑定UI到Model
class TBViewController: UIViewController {
@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!
let viewModel = BOViewModel()
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
// 实现 view -绑定-> model
self.searchBar.rx.text.orEmpty
.bind(to: self.viewModel.searchTextOB)
.disposed(by: self.disposeBag)
}
}
使用 bind 函数，完成输入框绑定到Model。
3、创建懒加载搜索结果序列
lazy var searchData: Driver<[BOReposityModel]> = {
}()
为了只产生一个可观察序列，所以使用懒加载。不需要错误处理，所以使用 Driver 对象。
在懒加载内部，将 searchTextOB 作为可观察序列订阅。即在 searchTextOB 收到外界输入框的输入变化时，同步发送信号，发起网络请求。
lazy var searchData: Driver<[BOReposityModel]> = {
return self.searchTextOB.asObservable()
// 每隔300毫秒请求一直，并且在主线程发起请求
.throttle(0.3, scheduler: MainScheduler.instance)
// 阻止发送相同的信号
.distinctUntilChanged()
.flatMapFirst(BOViewModel.requestData)
// 如果出错，则返回空数组
.asDriver(onErrorJustReturn: [])
}()
- 为了防止请求过快，所以间隔300毫秒才在主线程发起一起请求。
- 除非接收到不一样的信号，才会发起响应。
- 而且还做了错误处理，如果出错了，则返回空数组。
-
flatMapFirst函数接收一个闭包作为参数，但其实闭包也是一个函数，所以这里传入一个函数作为参数也是可以的。
4、发起网络请求
本例中使用的请求地址为：https://api.github.com/users/(githunId)/repos
在发起网络请求之前需要先判断传入的参数是否为空，已经网络地址是否正确。如果有错误，则返回空数组。
static func requestData(_ githubId: String) -> Observable<[BOReposityModel]> {
guard !githubId.isEmpty, let url = URL(string: "https://api.github.com/users/\(githubId)/repos") else {
return Observable.just([])
}
return URLSession.shared.rx.json(url: url)
.retry()
.observeOn(ConcurrentDispatchQueueScheduler(qos: .background))
.map(BOViewModel.parseData)
}
使用 URLSession 发起异步网络请求，并且对请求的结果进行数据解析。
5、数据解析
class BOReposityModel: HandyJSON {
var name: String = ""
var url: String = ""
required init() {}
}
static func parseData(_ json: Any) -> [BOReposityModel] {
guard let datas = json as? [[String: Any]] else { return [] }
guard let result = [BOReposityModel].deserialize(from: datas) else { return [] }
return result as! [BOReposityModel]
}
这里使用了一个三方库 HandyJSON 进行数据解析，小伙伴也可以根据自己的喜好和习惯，选择自己熟悉的数据解析方式。
6、绑定Model到UI
请求到数据以后，就需要将数据展示到页面上。
1、展示搜索结果数量到导航栏上
// 实现 model -绑定-> view
self.viewModel.searchData.map { (array) -> String in
return "共\(array.count)个结果"
}
.drive(self.navigationItem.rx.title)
.disposed(by: self.disposeBag)
2、展示结果到tableView列表上
// 实现 model -绑定-> view
self.viewModel.searchData.drive(self.tableView.rx.items){
(tableView, row, model) in
let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! BOTableViewCell
cell.nameLabel.text = model.name
cell.urlLabel.text = model.url
return cell
}
.disposed(by: self.disposeBag)
searchData 作为请求结果序列，直接驱动 tableView 的显示刷新。
使用这样的方式，无需再实现 UITableView 的 delegate 和 dataSource 协议方法。是不是简单很多？
RxSwift已经帮我们封装好了UITableView的代理协议，所以我们可以更专注于业务层以及UI层面，而不再需要各种冗余的代码。
使用 RxSwift 双向绑定来实现简单的搜 Demo，ViewController 中的代码不过区区60行左右，如果使用非RxSwift的方式，代码至少百行。这仅仅是计算Controller中的代码，还不包括ViewModel。这么好用的框架此时不用，更待何时？
好的框架需要学习，好的技术需要实战。
网友评论