Введение — Knockout.js

Knockout (нокаут) это JavaScript библиотека, помогающая создавать богатые, отзывчивые в отображении и редактировании пользовательские интерфейсы на основе чистой модели данных.
Каждый раз, когда у вас есть элементы UI которые динамически обновляются (например, изменения в зависимости от действий пользователя, или при изменении внешних данных),
KO поможет реализовать все это в более простом виде с возможностью последующей доработки.

Главные возможности

• Элегантное отслеживание зависимостей — автоматически обновляет соответствующие части вашего UI как только изменилось значение в модели данных.
• Декларативные биндинги — простой и очевидный способ соединения частей вашего UI с данными модели. Вы можете с легкостью создать сложные динамические интерфейсы, используя произвольно вложенные контексты биндингов.
• Тривиально расширяемый — реализация собственных поведений в виде новых декларативных биндингов, для простого повторого использования в пару строк кода.

Дополнительные преимущества

• Библиотека на чистом JavaScript — работает с любым сервером или клиентской технологией.
• Может быть добавлена поверз существующего веб-приложения — без необходимости больших архитектурных изменений.
• Компактный — около 13кб после gzip сжатия.
• Работает с любым распространенным браузером — IE 6+, Firefox 2+, Chrome, Safari, Edge, и другие.
• Полный набор спецификаций — (разработан в BDD-стиле) что означает простую проверку корректного функционирования в новых браузерах и платформах.

Разработчики, знакомые с Ruby on Rails, ASP.NET MVC, или другими MV* технологиями могут рассматривать MVVM в качестве формы MVC работающей в реальном времени с декларативным синтаксисом.
Другими словами, вы можете представлять KO как общий способ работы по созданию интерфейсов для редактирования JSON данных… Все, что сможет работать для ваших нужд 🙂

Ок, как его использовать?

Самый быстрый и веселый способ начать изучать KO, это пройти через серию интерактивных учебников. Как только ознакомитесь с
основами, поизучайте реальные примеры

Ок, KO предназначен для конкуренции с jQuery (или Prototype, и т.д.) или для совместной работы?

Все любят jQuery! Ведь это выдающаяся замена для неуклюжего и порой не согласующегося DOM API с которым нам приходилось мириться в прошлом.
jQuery — это превосходный низкоуровневый способ управлять элементами и обработчиками событий на веб-странице. KO решает другую проблему.

Как только ваш интерфейс становится нетривиальным и имеет несколько дублирующих(перекрывающих) друг друга поведения, то реализация таких вещей может стать более хитрой и дорогой в поддержке,
если использовать лишь jQuery. Рассмотрим пример: вы отображаете список элементов (записей), и подсчитываете их количество в этом списке, а так же хотите активировать кнопку ‘Добавить’ только,
тогда, когда в списке менее 5 элементов. jQuery не имеет концепции для дублируюхися моделей данных,
таким образом, для получения числа элементов в списке, вы должны получить его из числа TR’ов в таблице или числа DIV’ов с конкретным CSS классом.
Допустим число элементов отображается в каком-нибудь SPAN-элементе, и нужно помнить об обновлении текста внутри этого SPAN’а, когда пользователь добавляет новый элемент.
Так же, нужно помнить об отключении кнопки ‘Добавить’ когда количество TR’ов равно 5. Позже, вам так же понадобится реализовать кнопку ‘Удалить’
и определять, какой из DOM элементов нужно изменять, когда была нажата кнопка.

Чем отличается Knockout?

Это намного проще реализовать с KO. Он позволяет вам масштабировать проект по сложности без боязни появления inconsistencies.
Просто представьте ваши элементы списка, как массив из JavaScript, и затем используйте биндинг foreach для трансформации этого массива в Таблицу или набор DIV’ов.
Как только массив меняется, интерфейс будет изменяться, в соответствии с ним (вам не нужно выяснять, как внедрять новые TR’ы или где их внедрять).
Остальная часть интерфейса тоже будет синхронизирована в соответствии с массивом. Например, вы можете декларативно привязать к SPAN’у отображение числа элементов через:

There are <span data-bind="text: myItems().length"></span> items

Вот и все! Вам не нужно писать код для обновления этого значения; он сам обновится при изменении массива myItems.
Похоже и для включения/выключения кнопки ‘Добавить’ в зависимости от числа элементов, используйте:

<button data-bind="enable: myItems().length < 5">Add</button>

Позже, когда понадобится реализовать функционал кнопки ‘Удалить’, вам не будет не нужно выяснять, с какой частью интерфейса он взаимодействует; вы просто делаете изменения в базовой модели данных.

Подытоживая: KO не конкурирует с jQuery или похожими низкоуровневыми API по работе с DOM. KO предоставляет дополнительный, высокоуровневый способ соединения моделей данных с интерфейсом.
Сам по себе KO не завист от jQuery, но вы безусловно можете использовать его одновременно с jQuery, и действительно, часто это бывает полезно, если вам нужны вещи вроде анимированных переходов.

---

Эксклюзивно для сайта skv1991.ru

Перепечатка и копирование строго запрещены.

Оригинал страницы