How to work with bindings when using a view model vs using @Binding in the view itself?

user_3134192 0
Viewed 2974

@State and @Binding work so well in SwiftUI, as long as you put all the view's data inside itself, like this:

struct ColorView: View {
    @Binding public var isBlue: Bool

    var body: some View {
        Rectangle()
            .foregroundColor(isBlue ? .blue : .red)
            .onTapGesture {
                self.isBlue.toggle()
        }
    }
}

struct TestView: View {
    @State var isBlue: Bool = false

    var body: some View {
        ColorView(isBlue: $isBlue)
    }
}

It works without a problem and it's really simple. But MVVM says you should put all of the view's data inside a view model class, to separate UI from the model. But then you lose @State and @Binding completely. You lose this 2-way binding it seems. Sure, you can do it manually with Combine or something but that should not be the correct way, right?

Whenever I try anything, SwiftUI is really easy and convenient when you don't use view models. Once you put everything inside a view model class, though, everything breaks down and nothing works as convenient anymore. This can't be the case, they have to had thought of that. So I'm missing something here. I'd really appreciate any help. How would you code the above's example using view models (without "hacking" anything manually)? I tried but it doesn't even compile:

struct ColorView: View {
    @ObservedObject var viewModel: ViewModel

    class ViewModel: ObservableObject {
        // Binding or Published? Both doesn't seem to work
        @Binding var isBlue: Bool

        init(isBlue: Binding<Bool>) { // Or type Bool? But then we lose the binding
            self.$isBlue = isBlue
        }
    }

    var body: some View {
        Rectangle()
            .foregroundColor(viewModel.isBlue ? .blue : .red)
            .onTapGesture {
                self.viewModel.isBlue.toggle()
        }
    }
}

struct TestView: View {
    @ObservedObject var viewModel: ViewModel

    class ViewModel: ObservableObject {
        @Published var isBlue: Bool = false // We would need a @State here, but then we lose @Published
    }

    var body: some View {
        ColorView(viewModel: .init(isBlue: /* ??? */)) // How to pass a binding here`
    }
}

Do I think of this the wrong way?

Thanks!

swiftui swift
3 Answers

Here is the way (assuming that somewhere you call TestView(viewModel: ViewModel())):

class ViewModel: ObservableObject {
    @Published var isBlue: Bool = false
}

struct TestView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        ColorView(viewModel: self.viewModel)
    }
}

struct ColorView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        Rectangle()
            .foregroundColor(viewModel.isBlue ? .blue : .red)
            .onTapGesture {
                self.viewModel.isBlue.toggle()
        }
    }
}
user_122990300

Using MVVM is your choice, apple officially does not recommend to use any design pattern. They have given us below concepts and it truly depends on us how we can use them.

1- Property wrappers(@State, @Binding, @Environment)

2- SwiftUI replacement of Storyboards

3- Combine framework provides a declarative Swift API for processing values over time like RxSwift, RxJava, RxKotlin etc.

If you want to use MVVM you will still be using all of the above frameworks

View: Design and bind the view with SwiftUI.

ViewModel: Here you will use @Observable, @Published properties and bind it with View using SwiftUI binding concepts.

Model: Here we are using simple data models.

Network: Here we will be using Combine framework publisher/subscriber mechanism for handling network streams.

NOTE: You can combine all the above concepts and use it in another design pattern like MVP, MVC or VIPER.

user_39736470

Normally you should share viewModel (as @Asperi mentioned)

But if you in situation like you've already coded 2 separated viewModels for both views and now you need to link them. Currently there is no nice way to do it, but there're always some ways to "hack it"

1. Using Closure: Full Code base on your example will be like this (you can try on Preview)

struct ColorView: View {
    @Binding var isBlue: Bool
    @StateObject private var viewModel: ViewModel
    
    init(isBlue: Binding<Bool>) {
        _isBlue = isBlue
        _viewModel = StateObject(wrappedValue: ViewModel(isBlue: isBlue))
    }
    
    var body: some View {
        Rectangle()
            .foregroundColor(viewModel.isBlue ? .blue : .red)
            .onTapGesture { viewModel.isBlue.toggle() }
            .onChange(of: isBlue) { newValue in
                viewModel.isBlue = isBlue
            }
    }
    
    @MainActor class ViewModel: ObservableObject {
        @Published var isBlue: Bool {
            willSet { updateIsBlue(newValue) }
        }
        var updateIsBlue: (Bool)->()
        
        init(isBlue: Binding<Bool>) {
            self.isBlue = isBlue.wrappedValue
            self.updateIsBlue = { isBlue.wrappedValue = $0 }
        }
    }
}

struct TestView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        VStack {
            Button("is\(viewModel.isBlue ? "": " not") blue (using closure)") { viewModel.isBlue.toggle() }
            ColorView(isBlue: $viewModel.isBlue)
        }
    }
    
    @MainActor class ViewModel: ObservableObject {
        @Published var isBlue = true
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

2. Using NotificationCenter:

let notifNameForIsBlue = Notification.Name("isblue")

struct ColorView: View {
    @StateObject private var viewModel: ViewModel
    
    init(isBlue: Bool) {
        _viewModel = StateObject(wrappedValue: ViewModel(isBlue: isBlue))
    }
    
    var body: some View {
        Rectangle()
            .foregroundColor(viewModel.isBlue ? .blue : .red)
            .onTapGesture { viewModel.isBlue.toggle() }
    }
    
    @MainActor class ViewModel: ObservableObject {
        @Published var isBlue: Bool {
            willSet {
                NotificationCenter.default.post(name: notifNameForIsBlue, object: newValue)
            }
        }
        
        init(isBlue: Bool) {
            self.isBlue = isBlue
            NotificationCenter.default
                .publisher(for: notifNameForIsBlue)
                .compactMap { $0.object as? Bool }
                .assign(to: &$isBlue)
        }
    }
}

struct TestView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        VStack {
            Button("is\(viewModel.isBlue ? "": " not") blue (using notification)") {
                viewModel.isBlue.toggle()
            }
            ColorView(isBlue: viewModel.isBlue)
        }
        
    }
    
    @MainActor class ViewModel: ObservableObject {
        @Published var isBlue = true {
            willSet {
                NotificationCenter.default.post(name: notifNameForIsBlue, object: newValue)
            }
        }
        
        init() {
            NotificationCenter.default
                .publisher(for: notifNameForIsBlue)
                .compactMap { $0.object as? Bool }
                .assign(to: &$isBlue)
        }
    }
}
user_56079200
Related