Knockout.js является реализацией библиотеки JavaScript с открытым исходным кодом Модели Образцового Представления представления (MVVM) шаблон UI в JavaScript и HTML.

Knockout.js является чистой библиотекой JavaScript без внешних зависимостей. Это поддерживается во всех главных браузерах, IE 6 +, Firefox 2 +, Chrome, Opera, (настольный/мобильный) Safari.

Knockout.js работает с любой веб-платформой.

Основные характеристики Knockout.js включают:

• Свободный, с открытым исходным кодом (лицензия MIT)
• Маленький и легкий — 55 КБ уменьшены
• Декларативная Привязка: Легко свяжите элементы DOM с данными модели с помощью краткого, читаемого синтаксиса.
• Двухсторонняя привязка: Когда Ваши изменения состояния модели представления, Ваш UI обновляет автоматически. При изменении значений элемента формы состояние модели представления обновляет автоматически.
• Отслеживание зависимости: Неявно настройте цепочки отношений между данными модели, чтобы преобразовать и объединить его.
• Шаблонная обработка: Быстро генерируйте сложный, вложенный UIs как функцию Ваших данных модели.
• Компоненты - 3.2.0 +: Средства управления или Виджеты составлены из автономных допускающих повторное использование блоков кода.

Полезные ссылки

• Главная страница
• Учебное руководство
• Документация
• Форум
• Исходный код
• "Выведите меня из строя", блог одного из участников Нокаута
• Wiki - Плагины, демонстрационная привязка и лучшие практики
• Последняя Стабильная версия - нокаут-3.5.0.js
• Загрузка и Инструкция по установке
• Внешние ссылки

Пакет начинающего отрывка стека

HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 

JavaScript:

var ViewModel = function(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.fullName = ko.pureComputed(function() { return this.firstName() + " " + this.lastName(); }, this); }; ko.applyBindings(new ViewModel("Planet", "Earth"));