RxSwiftのExamplesにしれっと入ってる双方向データバインディングの演算子がイケてた

こんばんは！

RxSwift (RxCocoa)を使ってモデル←→ビューのお互いの更新を伝え合う双方向データバインディングをやってみます。

SwiftBond では双方向データバインディングがサポートされているのですが RxSwiftのドキュメントにはそのような記述はなく、綺麗に書く方法ないかな〜とExamplesを眺めていたらそれっぽいものを見つけたのでご紹介します。

やってること

• 登場人物
  • ラベル
    • 最新の値を表示し続ける
  • テキストフィールド ←こいつに双方向bindを実装します
    • 最新の値を表示し続ける
    • 値を入力できる
  • ボタン
    • 値を初期値に変更できる

このUIにおいて、

• テキストフィールドで入力した内容が即時ラベルに反映される。
• ボタンの押下で書き換わった内容が即時テキストフィールドに反映される。

という点において双方向のデータバインディングを実現してみます。

Before

import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    private var item = Variable<String?>("Hello!")
    private let disposeBag = DisposeBag()

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var textField: UITextField!

    @IBAction func resetButtonHandler(_ sender: UIButton) {
        item.value = "Hello!"
    }

    @IBAction func textFieldHandler(_ sender: UITextField) {
        item.value = sender.text
    }

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

    private func setup() {
        // モデルからビューへ
        item.asObservable().bind(to: textField.rx.text).disposed(by: disposeBag)
        // ビューからモデルへ
        textField.rx.text.subscribe(onNext: { [weak self] text in
            self?.item.value = text
        }).disposed(by: disposeBag)

        // 最新の値をラベルで表示しておく
        item.asObservable().bind(to: label.rx.text).disposed(by: disposeBag)
    }
}

ここで Bidirectional Operator <-> の登場です。

左辺にビュー、右辺にモデルが来るように書きます。
さらにそのままだと返り値が未使用と言われるので _ = を先頭につけておきます。
（一応例にもそう書いてあったのですが、万が一メモリリークの危険性踏んでたら教えて頂きたく...! ）

After

import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    private var item = Variable<String?>("Hello!")
    private let disposeBag = DisposeBag()

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var textField: UITextField!

    @IBAction func resetButtonHandler(_ sender: UIButton) {
        item.value = "Hello!"
    }

    @IBAction func textFieldHandler(_ sender: UITextField) {
        item.value = sender.text
    }

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

    private func setup() {
        _ = textField.rx.text <-> item // ここ（´∀｀ ）
        item.asObservable().bind(to: label.rx.text).disposed(by: disposeBag)
    }
}

ユーザID＋パスワードや、住所氏名年齢電話番号・・・のような設定するコンポーネントが多い画面で活躍してくれそうです！
だんだんRxSwiftが面白くなってきた今日このごろです おやすみなさい。