Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як ViewModel забезпечує двосторонню прив'язку даних (data binding)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Двостороння прив'язка даних (two-way data binding)** - це механізм, завдяки якому **View і ViewModel автоматично синхронізуються між собою**: якщо змінюється значення в моделі представлення - інтерфейс оновлюється, і навпаки - якщо користувач змінює дані в інтерфейсі, оновлюється властивість ViewModel. **Ключове:** ViewModel зберігає дані як спостережувані (observable) властивості, а View підписується на них - фреймворк автоматично синхронізує обидва напрямки без ручного коду.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Двостороння прив'язка даних (two-way data binding)** - це механізм, завдяки якому **View і ViewModel автоматично синхронізуються між собою**: якщо змінюється значення в моделі представлення - інтерфейс оновлюється, і навпаки - якщо користувач змінює дані в інтерфейсі, оновлюється властивість ViewModel. --- ### 1. **Суть механізму** > ViewModel зберігає дані, а View "підписується" на них. > > Коли дані в ViewModel змінюються - View оновлює відображення. > Коли користувач вводить щось у View - ViewModel отримує нове значення. Таким чином, між ними створюється **реактивний зв'язок**, і код оновлення інтерфейсу або передачі даних писати не потрібно. --- ### 2. **Як це працює технічно** #### 1. **ViewModel містить спостережувані поля** Замість звичайних змінних використовуються **observable-властивості** - об'єкти, які повідомляють підписників про зміни. Приклад на Kotlin (Android): ```kotlin class LoginViewModel : ViewModel() { val username = MutableLiveData<String>() val password = MutableLiveData<String>() } ``` Приклад на C# (WPF / .NET): ```csharp public class LoginViewModel : INotifyPropertyChanged { private string _username; public string Username { get => _username; set { _username = value; OnPropertyChanged(nameof(Username)); } } } ``` --- #### 2. **View прив'язує UI-елементи до цих властивостей** Інтерфейс "пов'язує" елементи напряму з ViewModel. В Android (XML): ```xml <EditText android:text="@={viewModel.username}" /> ``` Знак `@={...}` означає **двосторонню** прив'язку - якщо користувач змінює текст, `viewModel.username` оновлюється автоматично. У WPF (XAML): ```xml <TextBox Text="{Binding Username, Mode=TwoWay}" /> ``` --- #### 3. **Система відстежує зміни** Під капотом працює спостерігач (observer): - при зміні значення у ViewModel → View отримує сповіщення й оновлює UI; - при зміні у View → система викликає setter ViewModel і передає нове значення. --- ### 3. **Що відбувається покроково** 1. Користувач вводить текст у поле вводу. 2. UI-фреймворк (через binding-механізм) викликає setter у ViewModel. 3. ViewModel оновлює свою спостережувану властивість. 4. Усі підписані View (або інші компоненти) отримують сповіщення й змінюють відображення. Таким чином - **усе залишається синхронним** без ручного коду. --- ### 4. **Переваги такого зв'язку** Немає потреби вручну оновлювати UI або передавати значення. Зменшується кількість шаблонного коду ("клею" між шарами). Інтерфейс завжди відображає актуальний стан даних. ViewModel можна тестувати окремо від інтерфейсу. --- ### 5. **Підтримка на різних платформах** | Платформа | Механізм прив'язки | |---|---| | **Android** | `LiveData`, `DataBinding`, `ObservableField`, `Flow` | | **.NET / WPF / MAUI** | `INotifyPropertyChanged`, `Binding Mode=TwoWay` | | **Vue.js / Angular / React** | реактивні властивості (`v-model`, `ngModel`, `useState`) | | **SwiftUI** | анотації `@State`, `@Binding`, `@Published` | --- **Підсумок:** > Двостороння прив'язка даних дозволяє View і ViewModel "спілкуватися" без прямих викликів. > > ViewModel зберігає спостережувані властивості, > View прив'язує до них елементи, > а фреймворк автоматично синхронізує обидва напрямки - > **логіка та інтерфейс залишаються в постійній злагоді без зайвого коду.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.