За какво е механизма за двупосочно свързване?

Механизмът за двупосочно свързване на данни (two-way data binding) позволява автоматична синхронизация на данните между модела (обикновено състоянието на компонента) и изгледа (интерфейса на потребителя).

Основното предимство е следното:

• Улесняване на разработката: Разработчикът не трябва да пише ръчно код за актуализиране на изгледа при промени в данните в модела и обратно. Това се управлява от рамката или библиотеката.
• Намаляване на кода: Намалява обема на шаблонния код, свързан с обработката на събития за въвеждане от потребителя и актуализирането на показваните стойности.
• Подобряване на производителността (в определени сценарии): Някои рамки могат да оптимизират процеса на актуализация, реагирайки само на промени в директно свързаните данни.

Пример за използване в Angular с директивата ngModel:

<input [(ngModel)]="userName">
<p>Здравей, {{ userName }}!</p>

В този пример всяка промяна в полето за въвеждане <input> ще се отрази незабавно в параграфа <p>, и обратно, ако стойността на userName се промени в компонента, и полето за въвеждане ще се актуализира.

Недостатъци:

• Потенциално намаляване на производителността при много големи и сложни форми: Следенето на всички промени може да стане скъпо.
• По-трудно за отстраняване на грешки: Поради автоматичната синхронизация понякога е по-трудно да се разбере откъде идва конкретната промяна на данните.
• Криене на част от логиката: Механизмът на работа е скрит зад синтаксиса, което може да не е очевидно за начинаещи.

Алтернативата на двупосочното свързване е еднопосочното (one-way data binding), при което данните текат в една посока (обикновено от модела към изгледа). Актуализирането на модела в отговор на действия на потребителя изисква явно писане на обработващи събития.