將值域與控件域一同提升為rx的monand域,然后進行綁定。
類型提升。
在之前的文章樣例中,所有的綁定都是單向的。但有時候我們需要實現雙向綁定。比如將控件的某個屬性值與 ViewModel里的某個 Subject屬性進行雙向綁定:
- 這樣當
ViewModel里的值發生改變時,可以同步反映到控件上。 - 而如果對控件值做修改,
ViewModel那邊值同時也會發生變化。
一、簡單的雙向綁定
1,效果圖
(1)頁面上方是一個文本輸入框,用於填寫用戶名。它與 VM里的 username屬性做雙向綁定。
(2)下方的文本標簽會根據用戶名顯示對應的用戶信息。(只有 hangge顯示管理員,其它都是訪客)
2,樣例代碼
(1)首先定義一個 VM,代碼如下:
import RxSwift struct UserViewModel { //用戶名 let username = Variable("guest") //用戶信息 lazy var userinfo = { return self.username.asObservable() .map{ $0 == "hangge" ? "您是管理員" : "您是普通訪客" } .share(replay: 1) }() }
(2)頁面代碼如下(高亮部分為 textfield與 VM的雙向綁定):
import UIKit import RxSwift import RxCocoa class ViewController: UIViewController { @IBOutlet weak var textField: UITextField! @IBOutlet weak var label: UILabel! var userVM = UserViewModel() let disposeBag = DisposeBag() override func viewDidLoad() { //將用戶名與textField做雙向綁定 userVM.username.asObservable().bind(to: textField.rx.text).disposed(by: disposeBag) textField.rx.text.orEmpty.bind(to: userVM.username).disposed(by: disposeBag) //將用戶信息綁定到label上 userVM.userinfo.bind(to: label.rx.text).disposed(by: disposeBag) } }
二、自定義雙向綁定操作符(operator)
1,RxSwift 自帶的雙向綁定操作符
(1)如果經常進行雙向綁定的話,最好還是自定義一個 operator方便使用。
(2)好在 RxSwift項目文件夾中已經有個現成的(Operators.swift),我們將它復制到我們項目中即可使用。當然如我們想自己寫一些其它的雙向綁定 operator也可以參考它。
2,使用樣例
雙向綁定操作符是:<->。我們修改上面樣例,可以發現代碼精簡了許多。
import UIKit import RxSwift import RxCocoa class ViewController: UIViewController { @IBOutlet weak var textField: UITextField! @IBOutlet weak var label: UILabel! var userVM = UserViewModel() let disposeBag = DisposeBag() override func viewDidLoad() { //將用戶名與textField做雙向綁定 _ = self.textField.rx.textInput <-> self.userVM.username //將用戶信息綁定到label上 userVM.userinfo.bind(to: label.rx.text).disposed(by: disposeBag) } }
作者:八級大狂風AM
鏈接:https://www.jianshu.com/p/39fb6a65ec91
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。
http://www.hangge.com/blog/cache/detail_1929.html
