使用 MVVM 使用 RxSwift 查看初始数据源和过滤

Question

我从 RxSwift 开始，并试图获得一个使用 UISearchController 过滤数据源的简单示例。

我将 UISearchController 的基本设置连接到 UITableViewController。使用 MVVM，我还有一个基本的视图模型设置来驱动表格。

self.viewModel.searchText.accept(searchController.searchBar.text ?? "")

viewModel.listItems.bind(to: tableView.rx.items(cellIdentifier: "ItemCell")) { row, item, cell in
    cell.textLabel!.text = item.name
}
.disposed(by: disposeBag)

查看模型

class ListViewModel {

    private let sourceItems: BehaviorRelay<[ListItem]> = BehaviorRelay(value: [
            ListItem(name: "abc"),
            ListItem(name: "def"),
            ListItem(name: "ghi"),
            ListItem(name: "jkl"),
            ListItem(name: "mno")
        ])

    let searchText = BehaviorRelay<String>(value: "")
    var listItems: Observable<[ListItem]> = Observable.just([])

    init() {
        listItems = sourceItems.asObservable()
    }

}

我可以添加搜索过滤，这样只有匹配过滤字符串的值才会显示

let searchObservable = searchText
    .throttle(.milliseconds(300), scheduler: MainScheduler.instance)
    .distinctUntilChanged()
    .filter { query in
        return query.count > 2
    }
    .share(replay: 1)

listItems = Observable.combineLatest(sourceItems.asObservable(), searchObservable) { items, query in
        return items.filter({ item in
            item.name.lowercased().contains(query.lowercased())
        })
    }

但是，在匹配过滤器之前，它不会显示任何值。我要做的是最初显示所有值，然后只显示过滤后的值。当searchText 更改但为空或过滤掉事件时，我不太确定如何填充listItems。

Answer 1

您忘记订阅更改，而不是

listItems = Observable.combineLatest(sourceItems.asObservable(), searchObservable) { items, query in
    return items.filter({ item in
        item.name.lowercased().contains(query.lowercased())
    })
}

应该是

        Observable.combineLatest(sourceItems.asObservable(), searchObservable) { items, query in
        return items.filter({ item in
            item.name.lowercased().contains(query.lowercased())
        })
        }.subscribe(onNext: { resultArray in
            print(resultArray) // here you can change your listItems
        })
        .disposed(by: disposeBag)

这是如何更改 searchText searchText.accept("123")

更新：

要处理任何 searchBar 更新，您应该实现 serachBar.rx 下面是一些例子

 import UIKit
import RxSwift
import RxCocoa

class ListItem: NSObject {

    var name: String = ""

    public init(name str: String) {
        super.init()
        name = str
    }

}

class ViewController: UIViewController, UISearchBarDelegate {

    @IBOutlet weak var searchBar: UISearchBar!

    private let sourceItems: BehaviorRelay<[ListItem]> = BehaviorRelay(value: [
        ListItem(name: "abc"),
        ListItem(name: "def"),
        ListItem(name: "ghi"),
        ListItem(name: "jkl"),
        ListItem(name: "mno")
        ])

    let searchText = BehaviorRelay<String>(value: "")
    var listItems: Observable<[ListItem]> = Observable.just([])
    var disposeBag: DisposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        addSearchBarObserver()
        listItems = sourceItems.asObservable()
        Observable.combineLatest(sourceItems.asObservable(), searchText) { items, query in
            return items.filter({ item in
                item.name.lowercased().contains(query.lowercased())
            })
            }.subscribe(onNext: { resultArray in
                print(resultArray)
            })
            .disposed(by: disposeBag)
    }

    private func addSearchBarObserver() {
        searchBar
            .rx
            .text
            .orEmpty
            .debounce(.milliseconds(300), scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .subscribe { [weak self] query in
                guard
                    let query = query.element else { return }
                self?.searchText.accept(query)
            }
            .disposed(by: disposeBag)
    }

}

Answer 2

• 我的方法如下

• 创建如下的可观察类

import Foundation

class Observable<Generic> {

    var value: Generic {
        didSet {
            DispatchQueue.main.async {
                self.valueChanged?(self.value)
            }
        }
    }

    private var valueChanged: ((Generic) -> Void)?

    init(_ value: Generic) {
        self.value = value
    }

    /// Add closure as an observer and trigger the closure imeediately if fireNow = true
    func addObserver(fireNow: Bool = true, _ onChange: ((Generic) -> Void)?) {
        valueChanged = onChange
        if fireNow {
            onChange?(value)
        }
    }

    func removeObserver() {
        valueChanged = nil
    }

}

• 在您的 VM 中包含原始列表
• 如下创建不同的过滤列表

var cellViewModels: Observable<[/* your model */]?>

• 在视图中有如下的搜索栏委托方法 - 请记住，它会根据您的实现而有所不同 -

class TradeDealsViewController: UIViewController, UISearchBarDelegate {

    // Mark :- IB Outlets
    @IBOutlet weak var collectionView: UICollectionView!

    private var viewModel: ViewModel /* your VM */?

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        viewModel = TradeDealsViewModel()
        bindViewLiveData()
    }

    private func bindViewLiveData(){
        viewModel?.cellViewModels.addObserver({ [weak self] (responsee) in
            self?.collectionView.reloadData()
        })
    }

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        /* do your filtration logic here */
    }

}

• 请注意，此解决方案不使用 RxSwift，它仅使用基础

Answer 3

感谢@AlexandrKolesnik，我设法调整了他的答案并让它发挥作用：

class ListViewModel {

    private let sourceItems: BehaviorRelay<[ListItem]> = BehaviorRelay(value: [
        ListItem(name: "abc"),
        ListItem(name: "def"),
        ListItem(name: "ghi"),
        ListItem(name: "jkl"),
        ListItem(name: "mno"),
        ListItem(name: "abcdef")
    ])

    private var filteredItems: BehaviorRelay<[ListItem]> = BehaviorRelay(value: [])

    let searchText = BehaviorRelay<String>(value: "")
    var listItems: Observable<[ListItem]> {
        return filteredItems.asObservable()
    }

    private let disposeBag = DisposeBag()

    init() {
        searchText
            .throttle(.milliseconds(300), scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .subscribe({ [unowned self] event in

                guard let query = event.element, !query.isEmpty  else {
                    self.filteredItems.accept(self.sourceItems.value)
                    return
                }

                self.filteredItems.accept(
                    self.sourceItems.value.filter {
                        $0.name.lowercased().contains(query.lowercased())
                    }
                )

            })
            .disposed(by: disposeBag)
    }

}