knockout.js учебник
Начало работы с knockout.js
Поиск…
замечания
В этом разделе представлен обзор того, что такое knockout.js, и почему разработчик может захотеть его использовать.
Следует также упомянуть о любых крупных предметах в knockout.js и ссылаться на связанные темы. Поскольку документация для knockout.js является новой, вам может потребоваться создать начальные версии этих связанных тем.
Версии
| Версия | Заметки | Дата выхода |
|---|---|---|
| 3.4.2 | Исправление ошибок | 2017-03-06 |
| 3.4.1 | Исправление ошибок | 2016-11-08 |
| 3.4.0 | 2015-11-17 | |
| 3.3.0 | 2015-02-18 | |
| 3.2.0 | Введенное связывание component | 2014-08-12 |
| 3.1.0 | 2014-05-14 | |
| 3.0.0 | См. Также: обновление (из 2.x) заметок | 2013-10-25 |
| 2.3.0 | Последняя версия 2.x | 2013-07-08 |
| 2.0.0 | 2011-12-21 | |
| 1.2.1 | Последний релиз 1.x | 2011-05-22 |
| 1.0.0 | 2010-07-05 |
Установка или настройка
Нокаут доступен на большинстве платформ JavaScript или в качестве автономного скрипта.
Включить в качестве скрипта
Вы можете загрузить скрипт со своей страницы загрузки , а затем включить его на свою страницу со стандартным script tag
<script type='text/javascript' src='knockout-3.4.0.js'></script>
Использование CDN
Вы также можете включить нокаут из Microsoft CDN или CDNJS
<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
ИЛИ ЖЕ
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
Установить с npm
npm install knockout
вы можете добавить параметр --save чтобы сохранить его в файле package.json
Установить с беседки
bower install knockout
необязательно вы можете добавить параметр --save чтобы сохранить его в файле bower.json
Установить с NuGet
Install-Package knockoutjs
Начало работы: Привет, мир!
Создание документа HTML и включение функции knockout.js
Создайте HTML-файл и добавьте knockout.js через <script> .
<!DOCTYPE html>
<html>
<head>
<title>Hello world! (knockout.js)</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>
Добавьте второй <script> под сценарий нокаута. В этом теге скрипта мы инициализируем модель представления и применяем привязки данных к нашему документу.
<script>
var ViewModel = function() {
this.greeting = ko.observable("Hello");
this.name = ko.observable("World");
this.appHeading = ko.pureComputed(function() {
return this.greeting() + ", " + this.name() + "!";
}, this);
};
var appVM = new ViewModel();
ko.applyBindings(appVM);
</script>
Теперь продолжайте создавать представление , добавив некоторый HTML в тело:
<section>
<h1 data-bind="text: appHeading"></h1>
<p>Greeting: <input data-bind="textInput: greeting" /></p>
<p>Name: <input data-bind="textInput: name" /></p>
</section>
Когда HTML-документ открывается и скрипты выполняются, вы увидите страницу, в которой говорится « Привет, мир! , Когда вы меняете слова в элементах <input> , текст <h1> автоматически обновляется.
Как работает созданный файл
- Отладочная версия нокаута загружается из внешнего источника (cdnjs)
Код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
- Создается экземпляр viewmodel, который имеет наблюдаемые свойства. Это означает, что нокаут способен обнаруживать изменения и обновлять интерфейс.
Код:
var appVM = new ViewModel();
- Нокаут проверяет DOM для атрибутов
data-bindи обновляет пользовательский интерфейс, используя предоставленную модель просмотра.
Код:
ko.applyBindings(appVM);
- Когда он сталкивается с
textпривязкой, нокаут использует значение свойства, поскольку он определен в связанной видовой модели для ввода текстового узла:
Код:
<h1 data-bind="text: appHeading"></h1>
Расчетные наблюдаемые
Вычислительные наблюдаемые - это функции, которые могут «смотреть» или «реагировать» на другие наблюдаемые в модели представления. В следующем примере показано, как отобразить общее количество пользователей и средний возраст.
Примечание. В приведенном ниже примере также может использоваться pureComputed () (введено в версии 3.2.0), поскольку функция просто вычисляет что-то на основе других свойств модели представления и возвращает значение.
<div>
Total Users: <span data-bind="text: TotalUsers">2</span><br>
Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>
var viewModel = function() {
var self = this;
this.Users = ko.observableArray([
{ Name: "John Doe", Age: 30 },
{ Name: "Jane Doe", Age: 34 }
]);
this.TotalUsers = ko.computed(function() {
return self.Users().length;
});
this.UsersAverageAge = ko.computed(function() {
var totalAge = 0;
self.Users().forEach(function(user) {
totalAge += user.Age;
});
return totalAge / self.TotalUsers();
});
};
ko.applyBindings(viewModel);