Динамическое связывание данных в HTML и JS

Всем доброго времени суток.
Если вы задаетесь одним из следующих вопросов:

• что такое динамическое связывание данных?
• как работает связывание данных в AngularJS или ему подобных MVVM-фреймворках?
• чем, черт возьми, MPV отличается от MVVM?

Тогда вам под кат…
И да… в конце, как всегда, ссылка на код ;)

Про MVP:
MVP (Model-View-Presenter) — это один из самых распространенных шаблонов проектирования UI.

Суть его заключается в следующем:

• Presenter подписывается на события от View
• View эмитит события
• Presenter ловит события и делает запросы в Model
• При получении ответа от Model, Presenter обновляет View

Сразу же в глаза бросается ключевое отличие MVP от MVC: MVP, в отличии от MVC, имеет двустороннюю связь с View.
Запомним и пойдем дальше…

Про MVVM:
MVVM (Model-View-ViewModel) — это улучшеная форма MVP, при чем грань между ними так тонка, что иногда думаешь: «О, небо! За что ты так со мной?»

Сейчас объясню что я имею ввиду.

Суть MVVM заключается в следующем:

• ModelView подписывается на события от View
• View эмитит события
• ModelView ловит события и делает запросы в Model
• При получении ответа от Model, ModelView обновляет View

Если отбросить формальности, то так оно и есть. Поэтому я и сказал, что грань между MVP и MVVM очень тонка.

Глобально, разница лишь в том, что MVVM реализует более гибкий слушатель событий от View.
При чем реализует таким образом, что становится доступным так называемое декларативное динамическое связывание данных.

Про динамическое связывание данных:
Это такой механизм, при котором, изменив значение модели с любой стороны(со стороны View или Model), это изменение моментально вступит в силу. То есть, изменив значение в Model (в MVVM — ViewModel частично берет на себя функцию модели), оно сразу отобразится во View и наоборот.

Вы можете спросить: «Если в MVP есть двусторонняя связь между View и Presenter, то почему мы не можем реализовать динамическое связывание данных на MVP?».

Ответ очень прост — можем!
По сути, MVP уже подразумевает динамическое связывание данных в той или иной степени.
И, если MVP это чисто императивный подход к связыванию данных, то MVVM — декларативный.

Вот и вся разница.
Но суть у них одна и та же!

Про реализацию:
Теперь рассмотрим вопросы, связанные с реализаций динамического связывания данных.
Начнем с того, что, на текущий момент, браузер не способен динамически отслеживать изменение значений в переменных.
Конечно, есть такая штука как Object.observe(), но эта вещь, пока еще, не является частью стандарта.
Поэтому исходим из того, что

браузер не способен динамически отслеживать изменение значений в переменных

Соответсвенно, необходимо как-то понимать: когда нужно произвести синхронизацию между Model и View.
В современных фреймворках, типа Angular или Knockout, к этому вопросу подходят очень просто: вешают слушатели на разные события от элемента, которому необходимо динамическое связывание данных.
Например, для text input вешается слушатель на событие keyup.
Для button — click
И т.д.

Внутри обработчика происходит чтение новых данных и затем запускается механизм синхронизации оных с Model.

Вот, собственно, и вся история.

Кстати, если вы используете Angular, то, скорее всего, вам очень часто приходится прибегать к использованию таких вещей, как сервис $timeout…
Если вы используете $timeout на автоматизме, потому что так написано где-то на stack overflow, но не понимаете его сути, то знайте, что $timeout ждет, пока закончится текущий $digest-цикл, затем выполняет код, который вы ему передали, и затем снова запускает $digest-цикл. Именно так и достигается обновление данных, если оно было инициировано не из внутренностей Angular.

Что такое $digest-цикл?
В AngularJS это как раз и есть процесс синхронизации значений между Model и View.

И, как обещал, ссылка на Gist ^[1], в котором реализовано простейшее динамическое связывание данных.

В нескольких словах:

• выбираем все элементы, у которых есть атрибут data-bind
• регистрируем эти элементы как слушатели изменений модели
• вешаем на document общий обработчик, который будет производить синхронизацию между View и Model

Спасибо за внимание.

Автор: smelukov

Источник ^[2]