Menghubungkan View Model ke View
Hubungkan view model dengan SwiftUI dan Combine.
Menghubungkan View Model ke View adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.
Menghubungkan ViewModel ke Tampilan
ViewModel hanya berguna jika Tampilan bereaksi terhadap perubahannya. Dalam SwiftUI, reaktivitas ini didukung oleh pembungkus properti berbasis Combine @Published, @StateObject, dan @ObservedObject.
Ketiganya membentuk pengikatan otomatis: saat ViewModel berubah, Tampilan dirender ulang.
ObservableObject
Agar dapat diamati oleh SwiftUI, ViewModel harus mematuhi ObservableObject. Protokol ini memberinya penerbit objectWillChange yang mengirimkan pemberitahuan sebelum perubahan apa pun.
final class CounterViewModel: ObservableObject {
@Published var count: Int = 0
func increment() {
count += 1
}
}Properti @Published
Menandai sebuah properti dengan @Published akan secara otomatis mengirimkan notifikasi perubahan setiap kali nilainya ditetapkan.
Setiap properti @Published mengalir ke penerbit objectWillChange milik objek, sehingga Tampilan tahu persis kapan harus diperbarui.
final class SearchViewModel: ObservableObject {
@Published var query: String = ""
@Published var results: [String] = []
}@StateObject
@StateObject memberi tahu Tampilan untuk membuat dan memiliki ViewModel. SwiftUI membuat instansinya sekali dan mempertahankannya selama Tampilan tersebut dirender ulang.
Gunakan @StateObject di tempat ViewModel pertama kali dibuat.
struct CounterView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
Button("Count: \(viewModel.count)") {
viewModel.increment()
}
}
}@ObservedObject
@ObservedObject digunakan untuk ViewModel yang dibuat di tempat lain dan diteruskan ke Tampilan. Tampilan mengamatinya, tetapi tidak memiliki siklus hidupnya.
Gunakan ini pada tampilan anak yang menerima ViewModel dari induknya.
struct BadgeView: View {
@ObservedObject var viewModel: CounterViewModel
var body: some View {
Text("Total: \(viewModel.count)")
}
}StateObject vs ObservedObject
Perbedaan terpentingnya adalah kepemilikan:
- @StateObject — dimiliki oleh Tampilan dan tetap ada saat dirender ulang
- @ObservedObject — diteruskan ke Tampilan dan tidak dimilikinya
Menggunakan @ObservedObject saat seharusnya menggunakan @StateObject dapat menyebabkan objek dibuat ulang dan kehilangan statusnya setiap kali induk diperbarui.
Meneruskan ViewModel ke Bawah
Buat ViewModel sekali dengan @StateObject di induk, lalu teruskan ViewModel tersebut ke anak yang menandainya sebagai @ObservedObject.
struct ParentView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
VStack {
BadgeView(viewModel: viewModel)
Button("Add") { viewModel.increment() }
}
}
}Pengikatan Dua Arah
Untuk input seperti kolom teks, Anda memerlukan pengikatan dua arah. SwiftUI membuatnya dari properti @Published menggunakan awalan $ pada pembungkusnya.
struct SearchView: View {
@StateObject private var viewModel = SearchViewModel()
var body: some View {
TextField("Search", text: $viewModel.query)
}
}Mengendalikan Status Antarmuka
Tampilan seharusnya mengambil semua hal yang ditampilkannya dari properti yang dipublikasikan. Indikator pemuatan, spanduk kesalahan, dan isi semuanya mengalir dari status ViewModel.
final class FeedViewModel: ObservableObject {
enum State { case loading, loaded([String]), error(String) }
@Published var state: State = .loading
}Bereaksi terhadap Status
Tampilan memilih berdasarkan status ViewModel untuk merender antarmuka pengguna yang sesuai. Tidak ada kode imperatif untuk menampilkan atau menyembunyikan sesuatu, hanya pemetaan deklaratif.
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)
}
}
}Menjaga Pembaruan di Utas Utama
SwiftUI mengharuskan perubahan yang dipublikasikan dilakukan pada utas utama. Saat ViewModel memperbarui status setelah pekerjaan asinkron, beri anotasi @MainActor untuk menjaminnya.
@MainActor
final class ProfileViewModel: ObservableObject {
@Published var name: String = ""
func load() async {
name = await fetchName()
}
}Pemeriksaan Singkat
Uji pengetahuan Anda tentang pengikatan.
Ringkasan
Anda telah menghubungkan ViewModel ke Tampilan menggunakan pengikatan SwiftUI:
- ObservableObject + @Published mengirimkan notifikasi perubahan
- @StateObject membuat dan memiliki ViewModel
- @ObservedObject mengamati ViewModel yang diteruskan kepadanya
- @MainActor menjaga pembaruan asinkron tetap berada di utas utama
Dengan pengikatan reaktif yang sudah terpasang, Tampilan selalu mencerminkan status ViewModel terbaru secara otomatis.
Belajar Swift dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 122
- Pelajaran
- 409
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghubungkan View Model ke View” gratis?
Ya — teks lengkap “Menghubungkan View Model ke View” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menghubungkan View Model ke View”?
Hubungkan view model dengan SwiftUI dan Combine. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Swift Academy?
Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Menghubungkan View Model ke View” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?
Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pola MVVM
- Menghubungkan View Model ke View
- Pola Coordinator
- Menguji View Model