将值域与控件域一同提升为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. python提取批量文件内的指定内容

    目标文件夹: 文件内容: 实现代码: # -*- coding:utf-8 -*- # __author__ :kusy # __content__:get ssr info from html fi ...

  2. Python3+WebSockets实现WebSocket通信

    一.说明 1.1 背景说明 前段时间同事说云平台通信使用了个websocket的东西,今天抽空来看一下具体是怎么个通信过程. 从形式上看,websocket是一个应用层协议,socket是数据链路层. ...

  3. hystrix完成对redis访问的资源隔离

    相对来说,考虑的比较完善的一套方案,分为事前,事中,事后三个层次去思考怎么来应对缓存雪崩的场景 1.事前解决方案 发生缓存雪崩之前,事情之前,怎么去避免redis彻底挂掉 redis本身的高可用性,复 ...

  4. WPF 在MVVM模式下弹出子窗体的方式

    主要是通过一个WindowManager管理类,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show方法,显示出来 ...

  5. 【转载】 使用宝塔Linux面板功能查看服务器内存使用情况

    运维过阿里云服务器或者腾讯云服务器的运维人员都知道,针对占用内存比较高的应用或者服务等,我们需要时刻关注服务器的内存使用率,是否存在内存瓶颈等情况的出现.阿里云和腾讯云官方后台界面的监控数据页面也有相 ...

  6. Javascript/js 的浅拷贝与深拷贝(复制)学习随笔

    js变量的数据类型值分基本类型值和引用类型值. 在ES6(ECMAScript6)以前,基本数据类型包括String.Number.Boolean.Undefined.Null. 基本类型值的复制(拷 ...

  7. 35、element ui tab切换加载echarts不显示或显示不全问题解决:

    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card ...

  8. JavaScript 数组(一)数组基础

    一.数组 1.概述 数组 就是将多个元素按一定顺序排放到一个集合中,那么这个集合称之为数组. 数组 也是一种数据类型,属于复杂数据类型(Object). 2.特点 存放的元素有序的. 可以存放不同的数 ...

  9. Java JDBC 数据源

    数据源有2种: 普通数据源     即数据库驱动自带的数据源 连接池     包括数据库驱动自带的连接池,以及DBCP.C3P0等常用的第三方连接池. 数据库驱动自带的数据源 //从propertie ...

  10. Servlet , GenericServlet和HttpServlet

    Servlet是一套规范,表现为一套接口,留给开发人员去实现,Servlet接口定义如下(附加servlet-api source来查看源码) 其中init方法被Servlet容器调用,servlet ...