rxswift的双向绑定

2024-02-24 19:17:16

将值域与控件域一同提升为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)
    }
}

RxSwift使用详解系列
 原文出自:www.hangge.com转载请保留原文链接

作者：八级大狂风AM
链接：https://www.jianshu.com/p/39fb6a65ec91
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。 http://www.hangge.com/blog/cache/detail_1929.html

码农公寓