View models aan views koppelen
Verbind view models met SwiftUI en Combine.
View models aan views koppelen is een gratis Swift Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Swift Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Swift Academy bevat in totaal 4 lessen.
ViewModel met View verbinden
Een ViewModel is pas nuttig wanneer de View reageert op veranderingen ervan. In SwiftUI wordt deze reactiviteit mogelijk gemaakt door de op Combine gebaseerde eigenschapswrappers @Published, @StateObject en @ObservedObject.
Samen vormen ze een automatische binding: wanneer de ViewModel verandert, wordt de View opnieuw weergegeven.
ObservableObject
Om door SwiftUI te kunnen worden geobserveerd, moet een ViewModel voldoen aan ObservableObject. Dit protocol geeft de ViewModel een objectWillChange-publisher die vóór elke wijziging wordt geactiveerd.
final class CounterViewModel: ObservableObject {
@Published var count: Int = 0
func increment() {
count += 1
}
}Eigenschappen met @Published
Wanneer je een eigenschap markeert met @Published, wordt automatisch een wijzigingsmelding verstuurd telkens wanneer de waarde ervan wordt ingesteld.
Elke @Published-eigenschap wordt doorgegeven aan de objectWillChange-publisher van het object, zodat de View precies weet wanneer deze moet worden vernieuwd.
final class SearchViewModel: ObservableObject {
@Published var query: String = ""
@Published var results: [String] = []
}@StateObject
@StateObject vertelt een View dat deze een ViewModel moet aanmaken en beheren. SwiftUI instantieert de ViewModel één keer en houdt deze in stand wanneer de View opnieuw wordt weergegeven.
Gebruik @StateObject op de plek waar de ViewModel voor het eerst wordt aangemaakt.
struct CounterView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
Button("Count: \(viewModel.count)") {
viewModel.increment()
}
}
}@ObservedObject
@ObservedObject is bedoeld voor een ViewModel die elders is aangemaakt en wordt doorgegeven. De View observeert deze, maar beheert de levensduur ervan niet.
Gebruik dit voor onderliggende weergaven die een ViewModel van een bovenliggende weergave ontvangen.
struct BadgeView: View {
@ObservedObject var viewModel: CounterViewModel
var body: some View {
Text("Total: \(viewModel.count)")
}
}StateObject versus ObservedObject
Het belangrijkste verschil is het eigenaarschap:
- @StateObject — de View beheert het object; het blijft bestaan wanneer de View opnieuw wordt weergegeven
- @ObservedObject — het wordt doorgegeven; de View beheert het niet
Als je @ObservedObject gebruikt waar je @StateObject zou moeten gebruiken, kan het object bij elke update van het bovenliggende onderdeel opnieuw worden aangemaakt en zijn toestand verliezen.
Een ViewModel doorgeven
Maak de ViewModel één keer aan met @StateObject in de bovenliggende weergave en geef deze vervolgens door aan onderliggende weergaven die @ObservedObject gebruiken.
struct ParentView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
VStack {
BadgeView(viewModel: viewModel)
Button("Add") { viewModel.increment() }
}
}
}Tweerichtingsbindingen
Voor invoer zoals tekstvelden heb je een tweerichtings-Binding nodig. SwiftUI maakt er een aan vanuit een eigenschap met @Published, via het voorvoegsel $ op de wrapper.
struct SearchView: View {
@StateObject private var viewModel = SearchViewModel()
var body: some View {
TextField("Search", text: $viewModel.query)
}
}Toestand van de gebruikersinterface aansturen
De View moet alles wat ze toont afleiden uit gepubliceerde eigenschappen. Laadindicatoren, foutbanners en inhoud komen allemaal voort uit de toestand van de ViewModel.
final class FeedViewModel: ObservableObject {
enum State { case loading, loaded([String]), error(String) }
@Published var state: State = .loading
}Op toestand reageren
De View schakelt op basis van de toestand van de ViewModel om de juiste gebruikersinterface weer te geven. Er is geen imperatieve code om elementen te tonen of te verbergen, alleen een declaratieve koppeling.
struct FeedView: View {
@StateObject var viewModel = FeedViewModel()
var body: some View {
switch viewModel.state {
case .loading: ProgressView()
case .loaded(let items): List(items, id: \.self) { Text($0) }
case .error(let message): Text(message)
}
}
}Updates op de hoofdthread houden
SwiftUI vereist dat gepubliceerde wijzigingen op de hoofdthread worden uitgevoerd. Wanneer een ViewModel de toestand na asynchroon werk bijwerkt, annoteer je deze met @MainActor om dit te garanderen.
@MainActor
final class ProfileViewModel: ObservableObject {
@Published var name: String = ""
func load() async {
name = await fetchName()
}
}Snelle controle
Toets je kennis van bindingen.
Samenvatting
Je hebt ViewModels met Views verbonden via SwiftUI-bindingen:
- ObservableObject + @Published versturen wijzigingsmeldingen
- @StateObject maakt een ViewModel aan en beheert deze
- @ObservedObject observeert een doorgegeven ViewModel
- @MainActor houdt asynchrone updates op de hoofdthread
Met reactieve bindingen geeft de View altijd automatisch de meest recente toestand van de ViewModel weer.
Leer Swift met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 122
- Lessen
- 409
Veelgestelde vragen
Is de les “View models aan views koppelen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Swift Academy, waaronder “View models aan views koppelen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Swift Academy bevat in totaal 4 lessen.
Wat leer ik in “View models aan views koppelen”?
Verbind view models met SwiftUI en Combine. Je oefent met Swift Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Swift Academy te beginnen?
Ervaring vooraf is niet nodig. Swift Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “View models aan views koppelen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Swift Academy?
Ja. Elke les over Swift Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het MVVM-patroon
- View models aan views koppelen
- Het coordinatorpatroon
- View models testen