Knockout.js – библиотека JavaScript для работы с каркасом веб-приложенийСайто
Сайтодел
Knockout.js представляет собой библиотеку, написанную на JavaScript и основанную на шаблоне MVVM (Model-View-View Model). С помощью нее разработчики могут создавать отзывчивые и насыщенные сайты. В модели разделяются модель приложения, представление UI и представление модели на JavaScript.
Библиотеку разработал Стив Сандерсон, сотрудник Microsoft, в 2010 году. Knockout.js работает со всеми основными браузерами, куда входят IE 6+, Chrome, Safari, Firefox 3.5+ и Opera.
В этом уроке вы узнаете:
1) Особенности Knockout.js
2) Как запустить библиотеку?
3) Как работать с Knockout.js?
1) Особенности Knockout.js
Библиотека Knockout.js позволяет обрабатывать сложные интерфейсы, управляемые данными. Она представляет собой чистую библиотеку JavaScript и может работать с любыми фреймворками. Библиотека совмещается с другими клиентскими и серверными технологиями. Knockout.js не заменяет JQuery, но может стать дополнением, которое обеспечивает дополнительные функции.
Knockout.js обеспечен полной и подробной документацией, которая находится на официальном сайте. Сюда включены документы по API, примеры работы с кодом и даже учебные материалы. Сама библиотека весит очень мало, что дает ей преимущество. Knockout.js обладает открытым исходным кодом и бесплатен в использовании.
Библиотеку можно добавить в уже существующее веб-приложение без существенных архитектурных изменений. Она поддерживает все современные браузеры и разработана по принципу «behavior-driven development», благодаря чему проверка функционирования в браузере очень быстрая и простая.
Элементы интерфейса связываются с моделью данных путем декларативного связывания, что позволяет добиться большей отзывчивости. В модели может быть несколько уровней вложенности.
Пользовательский интерфейс обновляется автоматически, поэтому не нужно писать дополнительный код. Связь между зависимостями отслеживается очень легко. Для создания сложных структур пользовательского интерфейса применяются шаблоны.
2) Как запустить библиотеку?
Чтобы запустить Knockout.js, нужно скачать библиотеку на официальном сайте:
https://knockoutjs.com/
Теперь нужно обратиться к файлу, как в следующем коде. Эту строку нужно вставить в самое начало HTML-файла:
<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>
На библиотеку KnockoutJS можно сослаться из Microsoft Ajax CDN в своем коде таким образом:
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
Вы также можете использовать сокращенную версию библиотеки Knockout.js из CDNJS следующим образом:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type = "text/javascript"></script>
Готово! Библиотека подключена к документу.
3) Как работать с Knockout.js?
Knockout.js основан на шаблоне Model-View-ViewModel (MVVM). Сначала давайте взглянем на простой пример:
Эта строка относится непосредственно к Knockout.js:
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"> </script>
У нас есть два поля ввода: First String и Second String. Эти две переменные инициализируются через Enter First String и Enter Second String в ViewModel соответственно:
<p>First String: < input data-bind = "value: firstString" /> </p>
Вот как мы привязываем значения из ViewModel к элементам HTML, используя атрибут "data-bind" в основной части:
this.firstString = ko.observable("Enter First String");
ko.observable - это концепция, которая отслеживает изменения значений, чтобы она могла обновлять базовые данные.
Чтобы лучше понять это, давайте напишем в первом поле "Hello", а во втором поле ввода - "TutorialsPoint". Вы увидите, что значения обновляются одновременно.
Knockout.js - это клиентский фреймворк. Библиотека JavaScript позволяет очень легко привязывать HTML к данным домена. Knockout.js широко используется для одностраничных сайтов, которые могут извлекать все необходимые данные за одну загрузку страницы, что сокращает нагрузку на сервер.
Knockout.js основывается на следующих 3 важных концепциях:
Наблюдаемые объекты и отслеживание зависимостей между ними - элементы DOM подключены к ViewModel через "привязку данных". Они обмениваются информацией через наблюдаемые объекты. Это автоматически обеспечивает отслеживание зависимостей.
Декларативные привязки между пользовательским интерфейсом и элементами ViewModel - DOM связаны с ViewModel с помощью концепции "привязки данных".
Шаблоны для создания повторно используемых компонентов обеспечивают надежный способ создания сложных веб-приложений.
Надеемся, что статья была интересной и полезной. Применяйте знания в своей практике и не забудьте подписаться на наш канал!
До скорой встречи!
Ссылка на канал: https://t.me/sitodel