什么是双向绑定?双向绑定是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、发起网络请求
本例中使用的请求地址为:api.github.com/users/(gith…
在发起网络请求之前需要先判断传入的参数是否为空,已经网络地址是否正确。如果有错误,则返回空数组。
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 的显示刷新。
附个demo图:UI太丑,勿喷
使用这样的方式,无需再实现 UITableView 的 delegate 和 dataSource 协议方法。是不是简单很多?
RxSwift已经帮我们封装好了UITableView的代理协议,所以我们可以更专注于业务层以及UI层面,而不再需要各种冗余的代码。
使用 RxSwift 双向绑定来实现简单的搜 Demo,ViewController 中的代码不过区区60行左右,如果使用非RxSwift的方式,代码至少百行。这仅仅是计算Controller中的代码,还不包括ViewModel。这么好用的框架此时不用,更待何时?
好的框架需要学习,好的技术需要实战。