How to make a @Binding variable refresh the view

Question

As far as I understand, if I need to update the view model from inside a view, I need to make it a binding variable.

The model.

enum Options: Int, Identifiable, Equatable, CaseIterable {
    case option1 = 1
    case option2 = 2
    case option3 = 3
    case option4 = 4
    
    var id: String { "\(self.rawValue)" }
}

class TestViewModel:  ObservableObject {
    var selectedOption = Options.option1
    ...
}

The view.


struct TestView: View {
    @Binding var viewModel: TestViewModel
    @State var selectedOption = Options.option1

    var body: some View {
        
        Picker("Option 1", selection: $viewModel.selectedOption) {
            ForEach(Options.allCases, id: \.id) { value in
                Text(value.id)
                    .tag(value)
            }
        }
        Text("Selected Option: \(viewModel.selectedOption.rawValue)")
        
        Picker("Option 2", selection: $selectedOption) {
            ForEach(Options.allCases, id: \.id) { value in
                Text(value.id)
                    .tag(value)
            }
        }
        Text("Selected Option: \(selectedOption.rawValue)")
    }
        
}

Selecting a value in the first picket, the view doesn't refresh.
Selecting a value in the second picker, the view refreshes (as expected)

How can I make the view refresh using @Binding which is required to update the model?

I come up with this solution which works but it doesn't look good to me.

...
 let b = Binding<Options>(
            get: {
                viewModel.selectedOption
            },
            set: {
                viewModel.selectedOption = $0
                selectedOption = $0 // << this forces the view to refresh
            }
        )

 Picker("Speed 1", selection: b) {
            ForEach(Options.allCases, id: \.id) { value in
                Text(value.id)
                    .tag(value)
            }
        }
...

Binding does not refresh a view, view is refreshed by changed state, to which binding has bound, but not always - only when body of the view depends on that state. — Asperi
– Asperi, Commented Nov 5, 2020 at 17:58

Asperi · Accepted Answer · 2020-11-05 18:05:50Z

2

The ObservableObject works in pair with ObservedObject wrapper. In such case view model becomes source of truth for a view. So...

make property published

class TestViewModel:  ObservableObject {
    @Published var selectedOption = Options.option1     // << here !!
    ...
}

make view model wrapped by ObservedObject

struct TestView: View {
    @ObservedObject var viewModel: TestViewModel

bind picker directly to view model

 Picker("Speed 1", selection: $viewModel.selectedOption) {
            ForEach(Options.allCases, id: \.id) { value in
                Text(value.id)
                    .tag(value)
            }
        }

answered Nov 5, 2020 at 18:05

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cuneyt · Accepted Answer · 2020-11-06 00:23:00Z

0

I am not sure if you have a valid reason to use ObservableObject here but you can easily achieve the same results by using a struct and State variable:

struct TestViewModel {

    var selectedOption = Options.option1
}

struct TestView: View {

    @State var viewModel: TestViewModel

    var body: some View {
        Picker("Option 1", selection: $viewModel.selectedOption) {
            ForEach(Options.allCases, id: \.id) { value in
                Text(value.id)
                    .tag(value)
            }
        }
    }
}

answered Nov 6, 2020 at 0:23

Cuneyt

9915 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to make a @Binding variable refresh the view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related