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

rxswift的双向绑定的更多相关文章

  1. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  2. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  3. RAC textView的双向绑定

    今天在写关于textView的数据绑定时原先写法是这样的: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #78 ...

  4. AnjularJS系列3 —— 数据的双向绑定

    第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应 ...

  5. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  6. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  7. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  8. way.js - 轻量级、持久化的双向绑定JS库

    AngularJS的双向绑定一直为人称道,但使用AngularJS需要对页面组件化,学习成本还是很高的. 本文源自 https://github.com/gwendall/way.js 边学边译. 使 ...

  9. React的双向绑定

    以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式.有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建 ...

随机推荐

  1. [转帖]IBM Q3财报:云营收达到50亿美元 上升11%

    IBM Q3财报:云营收达到50亿美元 上升11% http://www.eetop.cn/cpu_soc/6946136.html 2019年Q3 IBM的营收 从千亿到 缩减到了 八百亿刀 卖掉了 ...

  2. centos 7 重新设置分区大小

    一.基础概念Cent0S 7默认启用LVM2(Logical Volume Manager),把机器的一块硬盘分为两个区sda1和sda2,其中分区sda1作为系统盘/boot挂载,少量空间:sda2 ...

  3. 可落地的DDD的(2)-为什么说MVC工程架构已经过时

    摘要 mvc是一种软件设计模式,最早由Trygve Reenskaug在1978年提出,他有效的解决了表示层,控制器层,逻辑层的代码混合在一起的问题,很好的做到了职责分离.但是在实际的编码实践过程中, ...

  4. 使用php函数防止SQL注入方法

    什么是SQL注入? SQL注入是指在你系统防御之外,某人将一段Mysql语句注入到你的数据库.注入通常发生在系统要求用户输入数据的时候,比如用户名的输入,用户可能输入的不是一个用户名,而是一段SQL语 ...

  5. C#DataTable使用方法详解

    在项目中常常常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 1.添加引用 1 2 ...

  6. .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)

    .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件 配置 ConfigureServices services .Add ...

  7. Win 10下安装 Redis

    目录 写在前面 一.安装环境 二.下载windows版本的Redis 三.安装Redis 四.安装服务 五.启动服务 六.测试Redis 七.常用的Redis服务. 写在前面 Redis 是一个开源使 ...

  8. Echarts X轴多项百分比的展示

    app.title = '堆叠柱状图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type ...

  9. [转]Python实现字符串反转的几种方法

    #第一种:使用字符串切片 result = s[::-1] #第二种:使用列表的reverse方法 l = list(s) l.reverse() result = "".join ...

  10. 使用MHA实现MySQL主从复制高可用

    一.MHA简介        MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司的youshimaton(现就职于Fac ...