Knockout.js

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

Основные возможности:

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

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

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

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

Хорошо, как им пользоваться?

Самый быстрый и увлекательный способ начать работу — пройти интерактивные учебные пособия пошаговые учебные материалы. После того, как вы освоите основы, изучите примеры в реальном времени, а затем попробуйте использовать их в своем проекте.

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

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

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

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

С KO это намного проще. Это позволяет масштабировать сложность без страха внесения противоречий. Просто представьте свои элементы в виде массива JavaScript, а затем используйте привязку foreach для преобразования этого массива в TABLE или набор 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 одновременно, и это часто бывает полезно, если вам нужны такие вещи, как анимированные переходы.