美文网首页iOS学习程序员
Swift - RxSwift的使用详解27(双向绑定:<

Swift - RxSwift的使用详解27(双向绑定:<

作者: 八级大狂风AM | 来源:发表于2018-03-20 09:22 被阅读2481次

        在之前的文章样例中,所有的绑定都是单向的。但有时候我们需要实现双向绑定。比如将控件的某个属性值与 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)页面代码如下(高亮部分为 textfieldVM 的双向绑定):

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转载请保留原文链接

相关文章

  • Swift - RxSwift的使用详解27(双向绑定:<

    在之前的文章样例中,所有的绑定都是单向的。但有时候我们需要实现双向绑定。比如将控件的某个属性值与 View...

  • RxSwift 使用详解

    Swift - RxSwift的使用详解1(基本介绍、安装配置) Swift - RxSwift的使用详解2(响应...

  • RxSwift 详解系列

    RxSwift详解 Swift - RxSwift的使用详解1(基本介绍、安装配置) Swift - RxSwif...

  • RxSwift 使用详解系列(转)

    RxSwift概览 RxSwift详解 Swift - RxSwift的使用详解1(基本介绍、安装配置) Swif...

  • RxSwift 使用详解系列(转)

    RxSwift概览 RxSwift详解 Swift - RxSwift的使用详解1(基本介绍、安装配置) Swif...

  • 双向绑定

    直接使用RxSwift Demo中定义好的双向绑定运算符(<->),在Operators.swift文件中,直接把...

  • URLSession的使用

    参考文章:Swift - RxSwift的使用详解43(URLSession的使用1:请求数据)Swift - R...

  • 2019-10-12[unowned self] 与 [weak

    参考文章:Swift - RxSwift的使用详解42([unowned self] 与 [weak self])...

  • Moya使用

    暂不深入学习参考文章:Swift - RxSwift的使用详解49(结合Moya使用1:数据请求)Swift - ...

  • 音乐播放

    rxswiftPlayer 这是一个音乐播放器,基于swift与rxswift双向绑定架构编写,git地址 简易播...

网友评论

    本文标题:Swift - RxSwift的使用详解27(双向绑定:<

    本文链接:https://www.haomeiwen.com/subject/ihojfftx.html