Нокаут (веб-фреймворк)
 | Эта статья включает список общих ссылок , но в ней отсутствуют достаточные соответствующие встроенные цитаты . ( июнь 2021 г. ) |
| Оригинальный автор(ы) | Стив Сандерсон |
|---|---|
| Первоначальный выпуск | 5 июля 2010 г. |
| Стабильная версия | 3.5.1
/ 5 ноября 2019 г |
| Репозиторий | Репозиторий нокаутов |
| Написано в | JavaScript |
| Размер | 59 КБ минимизировано / 283 КБ (режим разработки) |
| Тип | библиотека JavaScript |
| Лицензия | С |
| Веб-сайт | нокаутджс |
Knockout — это отдельная на JavaScript реализация шаблона Model-View-ViewModel с шаблонами. Таким образом, основополагающими принципами являются:
- четкое разделение между данными предметной области, компонентами представления и отображаемыми данными
- наличие четко определенного слоя специализированного кода для управления связями между компонентами представления
Последний использует встроенные функции управления событиями языка JavaScript.
Эти функции оптимизируют и упрощают спецификацию сложных взаимосвязей между компонентами представления, что, в свою очередь, делает отображение более отзывчивым, а взаимодействие с пользователем — более богатым.
Knockout был разработан и поддерживается как проект с открытым исходным кодом Стивом Сандерсоном.
Функции
[ редактировать ]Нокаут включает в себя следующие функции:
- Декларативные привязки
- Автоматическое обновление пользовательского интерфейса (при изменении состояния модели данных пользовательский интерфейс обновляется автоматически)
- Шаблоны отслеживания зависимостей (содержит специальный механизм шаблонов, но можно использовать и другие механизмы шаблонов)
Примеры
[ редактировать ]1. В этом примере два текстовых поля привязаны к наблюдаемым переменным в модели данных. Отображение «полного имени» привязано к зависимому наблюдаемому, значение которого вычисляется на основе наблюдаемых. При редактировании любого текстового поля отображение «полного имени» автоматически обновляется без явной обработки событий.
Просмотр модели (JavaScript)
[ редактировать ]function ViewModel() {
this.firstName = ko.observable("");
this.lastName = ko.observable("");
this.fullName = ko.computed(
function() { return this.firstName() + " " + this.lastName(); },
this);
}
ko.applyBindings(new ViewModel());
2. Создание пользовательских обработчиков привязки в KnockoutJS
Используйте объект ko.bindingHandlers, чтобы указать имя пользовательской привязки и создать функцию инициализации или обновления при создании пользовательского обработчика привязки. Функция init вызывается, когда к элементу применена привязка, что идеально подходит для однократной инициализации. Всякий раз, когда связанная наблюдаемая изменяется, вызывается функция обновления, которая позволяет вам реагировать на изменение данных.
Вот простой пример пользовательского обработчика привязки, который применяет указатель даты пользовательского интерфейса jQuery к элементу ввода:
Пользовательский обработчик привязки
[ редактировать ]ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor) {
$(element).datepicker({
onSelect: function(date) {
var observable = valueAccessor();
observable(date);
}
});
},
update: function(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
$(element).datepicker("setDate", value);
}
};
Ссылки
[ редактировать ]- Папа, Джон (февраль 2012 г.). «Начало нокаута» . Журнал MSDN . Проверено 9 марта 2012 г.
- Папа, Джон (март 2012 г.). «Встроенные привязки Knockout для HTML и JavaScript» . Журнал MSDN . Проверено 9 марта 2012 г.
- «Освоение Knockoutjs: комплексное руководство по динамическим веб-приложениям» . февраль 2024 года . Проверено 26 февраля 2024 г.
Внешние ссылки
[ редактировать ]
