В веб-разработке привязка данных — это мощный метод, используемый для синхронизации данных и пользовательского интерфейса. При изменении данных пользовательский интерфейс обновляется автоматически, и наоборот. В этом сообщении блога мы рассмотрим двустороннюю привязку данных, которая позволяет нам синхронизировать данные между родительским и дочерним компонентами в режиме реального времени.
Если вы предпочитаете пошаговое письменное руководство, вы можете продолжить чтение здесь».
В следующем фрагменте кода у нас есть родительский компонент с дочерним компонентом, и мы хотим синхронизировать данные между ними, используя двустороннюю привязку данных:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>Parent Component</h1>
<p>Value: <span id="parentValue"></span></p>
<button id="parentUpdateButton">Update Value</button>
<hr>
<div>
<h2>Child Component</h2>
<label for="childValue">Value:</label>
<input type="text" id="childValue">
</div>
</div>
<script>
const parentData = {};
const childData = {};
Object.defineProperty(parentData, 'value', {
get() {
return this._value;
},
set(newValue) {
document.getElementById('parentValue').innerText = newValue;
document.getElementById('childValue').value = newValue;
this._value = newValue;
}
});
Object.defineProperty(childData, 'value', {
get() {
return this._value;
},
set(newValue) {
parentData.value = newValue;
this._value = newValue;
}
});
document.getElementById('parentUpdateButton').addEventListener('click', (event) => {
parentData.value = "new value";
});
document.getElementById('childValue').addEventListener('input', (event) => {
console.log(event.target.value)
childData.value = event.target.value;
});
parentData.value = "Hello world!";
</script>
</body>
</html>
Давайте внимательнее посмотрим на код.
Во-первых, мы определяем два объекта, parentData и childData, для хранения данных для родительского и дочернего компонентов соответственно. Затем мы используем Object.defineProperty() для определения геттеров и сеттеров для свойства value каждого объекта.
Метод get() возвращает текущее значение свойства, а метод set() устанавливает новое значение для свойства и соответствующим образом обновляет пользовательский интерфейс. В объекте parentData при изменении значения мы обновляем текст внутри тега <span> и значение поля ввода дочернего компонента. В объекте childData при изменении значения мы обновляем значение объекта parentData.
Затем мы добавляем прослушиватели событий к кнопке обновления родителя и полю ввода дочернего элемента. При нажатии кнопки для свойства parentData.value устанавливается новое значение. Когда поле ввода дочернего элемента изменяется, для свойства childData.value устанавливается новое значение.
Наконец, мы устанавливаем начальное значение свойства parentData.value на «Hello world!». Вы можете попробовать ввести текст в поле ввода и посмотреть, как значение обновляется в пользовательском интерфейсе в режиме реального времени. Это возможно благодаря двустороннему механизму привязки данных, который мы реализовали с помощью ванильного JavaScript.
В заключение можно сказать, что двусторонняя привязка данных — это мощная техника, которая позволяет нам синхронизировать данные и пользовательский интерфейс в режиме реального времени. Мы можем использовать его для создания динамических и интерактивных приложений. Понимая, как работает привязка данных, мы можем создавать более эффективные и производительные приложения, обеспечивающие лучшее взаимодействие с пользователем.
