Data Binding with RxSwift This post is a tutorial that will teach you how to bind data to views using RxSwift, which is a part of the Functional Reactive (FRP) pattern — where views react to changes to data. These design patterns are distinct from each other. Unless you have a good reason to use both in a single project, I suggest that you be consistent in your architectural pattern — stick to just one! Programming design FRP is MVC. not As a reminder, Model View Controller (MVC), consists of having a be a “middleman” between a and the on screen. View Controller Data Model View Note that when using the MVC design pattern, the Model and the View directly communicate. never An to MVC is a design pattern called Functional Reactive Programming (FRP). FRP is quite the opposite of MVC — in regards to the fact that the Model and the View have a . alternative direct connection In this tutorial, we’ll only be looking at binding data to views using RxSwift— your views will update automatically whenever the data is updated. This tutorial requires you to use a Cocoapod called . Please use if you are using Swift 2.3. RxSwift The link I provided is for Swift 3. this branch of RxSwift What we’ll be doing is setting up a direct connection between the data and the view. You can fork and clone my starter repo . here Let’s use the example of having a that is updated upon text input from a . UILabel UIAlertController Normally, you might have a variable that looks like this to represent the name value: let name: String = "Julia" To convert this variable into one that will be compatible with RxSwift, we have to change the type of the variable. let name: Variable<String> = Variable("Julia") Note that our variable is now of the class, which is part of the RxSwift library. Variable As you might have noticed, the class serves as a for the data stored in the variable. So, you can still access the string “Julia” by calling . Variable wrapper name.value Next, we call the function on our variable, . We then call the function on the result, passing in the view element that we are binding to. asObservable name bindTo name.asObservable().bindTo(nameLabel.rx.text) In this particular case, we are binding to the property of a named . However, the function also allows us to bind to other properties of views, such as . text UILabel nameLabel bindTo backgroundColor And lastly, we have to initialize and use a dispose bag. The dispose bag will make sure that the bindings are also deallocated when the View Controller is deallocated. The binds that we create between data and views will persist even after the View Controller is deallocated. let disposeBag = DisposeBag() In order to add the binding to the dispose bag, we have to call one last function on the binding. Here is what the final binding should look like: name.asObservable().bindTo(nameLabel.rx.text).addDisposableTo(disposeBag) Lastly, in order for your views to change, you need to change the data! The variable in this tutorial changes based on text input from a , we’ll implement the code that changes the view. UIAlertController Normally, your action closure might look like this: let okAction = UIAlertAction(title: "OK", style: .default) { action inif let textInput = alert.textFields?.first?.text {self.name = textInputself.nameLabel.text = self.name}} Note that you have to update your views as well as your data. When we bind our views to the data, we don’t have to update the views. The binding implies it automatically updates! All we have to do is change the data itself. let okAction = UIAlertAction(title: "OK", style: .default) { action inif let textInput = alert.textFields?.first?.text {self.name.value = textInput}} Remember that the type of is —meaning the data is enclosed in a wrapper. Instead of updating the name variable itself, we have to update the data, which happens to be at its property. name Variable value Here is a link to a with the working code from this tutorial. Please feel free to reach out if you have any questions! Github repo Did you gain value by reading this article? to share it on Twitter! If you’d like to see content like this more often, follow me on Medium and subscribe to my once-a-month newsletter below. Feel free to too. Click here buy me a coffee

Twitter

A Note of Consideration to All Developers

Have an idea for a project? Read this first.

Too Long; Didn't Read

Make resilience your competitive advantage

Functional Reactive Programming in Swift 3

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Guide To Organizing Your iOS Debug, Development, and Release States With .xcconfig Files

How To Access Properties Of Objects On Observables Like A True Expert

Lattice 4.0: A solution to the View-State problem

The fundamental principles behind MobX

The State of Reactive

Guide To Organizing Your iOS Debug, Development, and Release States With .xcconfig Files

How To Access Properties Of Objects On Observables Like A True Expert

Lattice 4.0: A solution to the View-State problem

The fundamental principles behind MobX

The State of Reactive

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps