Binding value from an ObservableObject

Question

Aim:

I have a model which is an ObservableObject. It has a Bool property, I would like to use this Bool property to initialise a @Binding variable.

Questions:

1. How to convert an @ObservableObject to a @Binding ?
2. Is creating a @State the only way to initialise a @Binding ?

Note:

• I do understand I can make use of @ObservedObject / @EnvironmentObject, and I see it's usefulness, but I am not sure a simple button needs to have access to the entire model.
• Or is my understanding incorrect ?

Code:

import SwiftUI
import Combine
import SwiftUI
import PlaygroundSupport

class Car : ObservableObject {

    @Published var isReadyForSale = true
}

struct SaleButton : View {

    @Binding var isOn : Bool

    var body: some View {

        Button(action: {

            self.isOn.toggle()
        }) {
            Text(isOn ? "On" : "Off")
        }
    }
}

let car = Car()

//How to convert an ObservableObject to a Binding
//Is creating an ObservedObject or EnvironmentObject the only way to handle a Observable Object ?

let button = SaleButton(isOn: car.isReadyForSale) //Throws a compilation error and rightly so, but how to pass it as a Binding variable ?

PlaygroundPage.current.setLiveView(button)

Solution 1

Binding variables can be created in the following ways:

1. @State variable's projected value provides a Binding<Value>
2. @ObservedObject variable's projected value provides a wrapper from which you can get the Binding<Subject> for all of it's properties
3. Point 2 applies to @EnvironmentObject as well.
4. You can create a Binding variable by passing closures for getter and setter as shown below:

let button = SaleButton(isOn: .init(get: { car.isReadyForSale },
                                    set: { car.isReadyForSale = $0} ))

Note:

• As @nayem has pointed out you need @State / @ObservedObject / @EnvironmentObject / @StateObject (added in SwiftUI 2.0) in the view for SwiftUI to detect changes automatically.
• Projected values can be accessed conveniently by using $ prefix.

Solution 2

1. You have several options to observe the ObservableObject. If you want to be in sync with the state of the object, it's inevitable to observe the state of the stateful object. From the options, the most commons are:

   • @State
   • @ObservedObject
   • @EnvironmentObject

It is upto you, which one suits your use case.

2. No. But you need to have an object which can be observed of any change made to that object in any point in time.

---

In reality, you will have something like this:

class Car: ObservableObject {
    @Published var isReadyForSale = true
}

struct ContentView: View {

    // It's upto you whether you want to have other type 
    // such as @State or @ObservedObject
    @EnvironmentObject var car: Car

    var body: some View {
        SaleButton(isOn: $car.isReadyForSale)
    }

}

struct SaleButton: View {
    @Binding var isOn: Bool
    var body: some View {
        Button(action: {
            self.isOn.toggle()
        }) {
            Text(isOn ? "Off" : "On")
        }
    }
}

If you are ready for the @EnvironmentObject you will initialize your view with:

let contentView = ContentView().environmentObject(Car())

Solution 3

struct ContentView: View {
    @EnvironmentObject var car: Car

    var body: some View {
        SaleButton(isOn: self.$car.isReadyForSale)
    }
}

class Car: ObservableObject {
    @Published var isReadyForSale = true
}

struct SaleButton: View {
    @Binding var isOn: Bool

    var body: some View {
        Button(action: {
            self.isOn.toggle()
        }) {
            Text(isOn ? "On" : "Off")
        }
    }
}

Ensure you have the following in your SceneDelegate:

// Create the SwiftUI view that provides the window contents.
let contentView = ContentView()
    .environmentObject(Car())

Comments

[user1046037]

Thanks, I totally agree we can do via State, was wondering if there was a way to do without using State (as stated in the question)

[user1046037]

Thanks, was hoping that the button doesn't have access to the entire Car model. I couldn't find a way to create a binding. As Asperi has pointed out, Binding has an initialiser which takes in a getter and setter

[fulvio]

@user1046037 It is doing it without State.

[user1046037]

It uses environment object, as stated in the question I was hoping not to use EnvironmentObject or ObservedObject because I didn't want the entire model to be accessible to a simple button.

[nayem]

Well @user1046037, I see that. Actually your button won't have that access to the Car model unless you deliberately inject it to the Button object. If you consider using @EnvironmentObject in the container/parent of the button and you don't define an access point to that said @EnvironmentObject in your SaleButton, the object isn't exposed to the button object at all. Other than that, if you use @State or @ObservedObject in the container, you won't be able to reference that object from your SaleButton without deliberately passing that object around.

[nayem]

But I'm afraid whether the solution you pointed out as @Asperi provided can cope up with your use case or not. Because it's evident that your button won't be able to refresh its view even if it can mutate the state of the car object as you aren't helping SwiftUI to remember the state of your car instance.

[user1046037]

That is correct, however it opens the possibility of not passing the entire model to the button and just passing just a closure that would update. I agree that @ObservedObject would have to be used however I never knew that there was a way to bridge the gap from Observable Object to a Binding (by creating a binding from get / set closure). Your solution works without passing the entire model

[nayem]

Well, I got your point. Be informed that the creation of a Binding doesn't require the object being used in the get-set closure to be an ObservableObject. Even value type objects can also be used for that reason.

[user1046037]

I am not sure I follow, are you referring to plain swift properties ? I wanted something that would update my model, not sure how a value type would help. It is nice that environment has a way to bridge to binding variable it but an observed object has to do it via a closure

[nayem]

Yes! You can also try that yourself. Just make your Car a struct. And for testing purpose you can add a property observer didSet in the property of the struct object.

[Hasaan Ali]

I found several useful / needed answers related to SwiftUI by @Asperi - Stay contributing :thumbs-up:

[yuanjilee]

As way 2, you can direct get Binding <Value> by $car.isReadyForSale

[bauerMusic]

It's easy to mix (as I did) $car.isReadyForSale with car.$isReadyForSale. The latter one will produce a Published<Value>.Publisher, which is not what we want. (Actually, @yuanjilee, that's the best answer)

[Ian Warburton]

This is like what you do with ReactJS. You pass the child view a function that updates the state within the context that it's defined.