8

I'm in the process of migrating an existing app using MVC that makes heavy use of the delegation pattern to MVVM using RxSwift and RxCocoa for data binding.

In general each View Controller owns an instance of a dedicated View Model object. Let's call the View Model MainViewModel for discussion purposes. When I need a View Model that drives a UITableView, I generally create a CellViewModel as a struct and then create an observable sequence that is converted to a driver that I can use to drive the table view.

Now, let's say that the UITableViewCell contains a button that I would like to bind to the MainViewModel so I can then cause something to occur in my interactor layer (e.g. trigger a network request). I'm not sure what is the best pattern to use in this situation.

Here is a simplified example of what I've started out with (see 2 specific question below code example):

Main View Model:

class MainViewModel {

   private let buttonClickSubject = PublishSubject<String>()   //Used to detect when a cell button was clicked.

   var buttonClicked: AnyObserver<String> {
      return buttonClickSubject.asObserver()
   }

   let dataDriver: Driver<[CellViewModel]>

   let disposeBag = DisposeBag()

   init(interactor: Interactor) {
      //Prepare the data that will drive the table view:
      dataDriver = interactor.data
                      .map { data in
                         return data.map { MyCellViewModel(model: $0, parent: self) }
                      }
                      .asDriver(onErrorJustReturn: [])

      //Forward button clicks to the interactor:
      buttonClickSubject
         .bind(to: interactor.doSomethingForId)
         .disposed(by: disposeBag)
   }
}

Cell View Model:

struct CellViewModel {
   let id: String
   // Various fields to populate cell

   weak var parent: MainViewModel?

   init(model: Model, parent: MainViewModel) {
      self.id = model.id
      //map the model object to CellViewModel

      self.parent = parent
   }
}

View Controller:

class MyViewController: UIViewController {
    let viewModel: MainViewModel
    //Many things omitted for brevity

    func bindViewModel() {
        viewModel.dataDriver.drive(tableView.rx.items) { tableView, index, element in
            let cell = tableView.dequeueReusableCell(...) as! TableViewCell
            cell.bindViewModel(viewModel: element)
            return cell
        }
        .disposed(by: disposeBag)
    }
}

Cell:

class TableViewCell: UITableViewCell {
    func bindViewModel(viewModel: MyCellViewModel) {
        button.rx.tap
            .map { viewModel.id }       //emit the cell's viewModel id when the button is clicked for identification purposes.
            .bind(to: viewModel.parent?.buttonClicked)   //problem binding because of optional.
            .disposed(by: cellDisposeBag)
    }
}

Questions:

  1. Is there a better way of doing what I want to achieve using these technologies?
  2. I declared the reference to parent in CellViewModel as weak to avoid a retain cycle between the Cell VM and Main VM. However, this causes a problem when setting up the binding because of the optional value (see line .bind(to: viewModel.parent?.buttonClicked) in TableViewCell implemenation above.

2 Answers 2

7

The solution here is to move the Subject out of the ViewModel and into the ViewController. If you find yourself using a Subject or dispose bag inside your view model, you are probably doing something wrong. There are exceptions, but they are pretty rare. You certainly shouldn't be doing it as a habit.

class MyViewController: UIViewController {
    var tableView: UITableView!
    var viewModel: MainViewModel!
    private let disposeBag = DisposeBag()

    func bindViewModel() {
        let buttonClicked = PublishSubject<String>()
        let input = MainViewModel.Input(buttonClicked: buttonClicked)
        let output = viewModel.connect(input)
        output.dataDriver.drive(tableView.rx.items) { tableView, index, element in
            var cell: TableViewCell! // create and assign
            cell.bindViewModel(viewModel: element, buttonClicked: buttonClicked.asObserver())
            return cell
        }
        .disposed(by: disposeBag)
    }
}

class TableViewCell: UITableViewCell {
    var button: UIButton!
    private var disposeBag = DisposeBag()
    override func prepareForReuse() {
        super.prepareForReuse()
        disposeBag = DisposeBag()
    }

    func bindViewModel<O>(viewModel: CellViewModel, buttonClicked: O) where O: ObserverType, O.Element == String {
        button.rx.tap
            .map { viewModel.id }    //emit the cell's viewModel id when the button is clicked for identification purposes.
            .bind(to: buttonClicked) //problem binding because of optional.
            .disposed(by: disposeBag)
    }
}

class MainViewModel {

    struct Input {
        let buttonClicked: Observable<String>
    }

    struct Output {
        let dataDriver: Driver<[CellViewModel]>
    }

    private let interactor: Interactor

    init(interactor: Interactor) {
        self.interactor = interactor
    }

    func connect(_ input: Input) -> Output {
        //Prepare the data that will drive the table view:
        let dataDriver = interactor.data
            .map { data in
                return data.map { CellViewModel(model: $0) }
            }
            .asDriver(onErrorJustReturn: [])

        //Forward button clicks to the interactor:
        _ = input.buttonClicked
            .bind(to: interactor.doSomethingForId)
        // don't need to put in dispose bag because the button will emit a `completed` event when done.

        return Output(dataDriver: dataDriver)
    }
}

struct CellViewModel {
    let id: String
    // Various fields to populate cell

    init(model: Model) {
        self.id = model.id
    }
}
7
  • 1
    Thanks Daniel, there is a lot of great stuff here that will help out a lot. One quick question: can you explain your comment about why the button will emit a completed event? I'm new to RxSwift and don't see why that would happen. Oct 30, 2019 at 12:30
  • 1
    All UIControls will emit a completed event when they are dealloced.
    – Daniel T.
    Oct 30, 2019 at 18:17
  • 1
    Why do you recreate the dispose bag in when reusing the cell? Why not just use serial disposable instead? Nov 13, 2020 at 4:49
  • 1
    @DanielT. BTW, your quote here: "If you find yourself using a Subject or dispose bag inside your view model, you are probably doing something wrong. ". Why? Are there any drawbacks to using them that way? Or is it just a matter of preference? Nov 13, 2020 at 6:13
  • 1
    Because your view model is supposed to represent the logic of the view it's attached to. If you need a dispose bag, then that means you are dealing with behavior, not logic. The purpose of the view model is to separate the logic from the behavior, therefore having a disposeBag in your view model means you are going against that purpose.
    – Daniel T.
    Nov 13, 2020 at 12:30
0

you can use this RxReusable. this is Rx extension of UITableViewCell, UICollectionView…

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.