如何使用 RxSwift 让 ViewController 观察 ViewModel 变量（Variable<..>）的任何变化？

Question

如何从ViewController 观察ViewModel 类中Variable<...> 值(RxSwiftVariable) 的变化？

因此，如果我在ViewModel 中的任何Variable<..> 的值在ViewModel 中发生的事情中发生变化，那么ViewController 将被注意到“嘿！一个或多个变量 在 ViewModel 中发生了变化！向 ViewModel 询问你需要更新 UI 并更新 UI 的数据！”

然后ViewController 在 ViewController 中调用方法 updateUI() 并在其中向 ViewModel 询问所有信息，例如状态/状态，以更新 UI，如下所示：

func updateUI() {
  progressBar.hide = viewModel.getProgressBarVisibility()
  errorMessageLabel.hide = viewModel.getErrorMessageVisibility()
  errorMessageLabel.text = viewModel.getErrorMessageText()
  .....
  ...
}

Answer 1

我们可以构造一个双向绑定运算符，您只需使用 bindTo 即可。以下是 ControlProperty 变量和变量 变量的实现：

infix operator <->

@discardableResult func <-><T>(property: ControlProperty<T>, variable: BehaviorSubject<T>) -> Disposable {
    let variableToProperty = variable.asObservable()
        .bind(to: property)

    let propertyToVariable = property
        .subscribe(
            onNext: { variable.onNext($0) },
            onCompleted: { variableToProperty.dispose() }
    )

    return Disposables.create(variableToProperty, propertyToVariable)
}

您可以在以下帖子中找到问题的详细答案。 Two way binding in RxSwift

Answer 2

要更新您的 UI，我建议使用 viewState 变量，您可以在需要时在视图模型类中更新该变量，例如：

/// Making it generic allow you to add your view specific state
public enum ViewState<T> {
    // add all the case you need
    case loading
    case ready(T)
    case failure(Error)
}

然后在你的 viewModel 类中：

let viewState: Variable<ViewState<YourViewControllerState>> = Variable<ViewState<YourViewControllerState>>(.loading)

YourViewControllerState 是您的具体案例的枚举：

enum YourViewControllerState {
    case progressBarShowed, //...
}

最后在你的 ViewController 中：

viewModel.viewState
    .asObservable()
    .observeOn(MainScheduler.instance)
    .subscribe { [weak self] _ in
        self?.updateUI()
    }.disposed(by: disposeBag)

private func updateUI() {
    guard isViewLoaded else {
        return
    }

    switch viewModel.viewState.value {
    case .ready(.progressBarShowed):
        progressBar.hide = viewModel.getProgressBarVisibility()

    case .failure:
        errorMessageLabel.hide = viewModel.getErrorMessageVisibility()
        errorMessageLabel.text = viewModel.getErrorMessageText()
    }
}

Answer 3

如果单个 ViewModel 的属性值发生变化，为什么要更新整个 UI？

RxSwift 使您能够独立监听更改，并且您可以相应地做出反应/更改 UI。

在我看来，您的 ViewModel 和 ViewController 类应该是这样的：

class ViewModel {
    private var progressBarVisibiity:Variable<Double> = Variable.init(0.0)
    private var errorMessageVisibiity:Variable<Double> = Variable.init(0.0)
    private var errorMessageLabel:Variable<String> = Variable.init("Default text")

    public func setProgressBarVisibiity(_ value:Double) {
        progressBarVisibiity.value = value
    }

    public func setErrorMessageVisibiity(_ value:Double) {
        errorMessageVisibiity.value = value
    }

    public func setErrorMessageLabel(_ value:String) {
        errorMessageLabel.value = value
    }

    public func observeProgressBarVisibiity() -> Observable<Double> {
        return progressBarVisibiity.asObservable().observeOn(MainScheduler())
    }

    public func observeErrorMessageVisibiity() -> Observable<Double> {
        return errorMessageVisibiity.asObservable().observeOn(MainScheduler())
    }

    public func observeErrorMessageLabel() -> Observable<String> {
        return errorMessageLabel.asObservable().observeOn(MainScheduler())
    }
}

class ViewController {
    let viewModel = ViewModel()
    let disposeBag = DisposeBag()
    func observeViewModelChanges() {
        viewModel
            .observeProgressBarVisibiity()
            .subscribe(onNext: { value in
                self.progressBar.hide = viewModel.getProgressBarVisibility()
            })
            .disposed(by: disposeBag)

        viewModel
            .observeErrorMessageVisibiity()
            .subscribe(onNext: { value in
                self.errorMessageLabel.hide = value
            })
            .disposed(by: disposeBag)

        viewModel
            .observeErrorMessageLabel()
            .subscribe(onNext: { value in
                self.errorMessageLabel.text = value
            })
            .disposed(by: disposeBag)
    }
}