knockout.js Samouczek
Pierwsze kroki z knockout.js
Szukaj…
Uwagi
Ta sekcja zawiera przegląd tego, czym jest knockout.js i dlaczego deweloper może chcieć go użyć.
Powinien także wymieniać wszelkie duże tematy w knockout.js i zawierać linki do powiązanych tematów. Ponieważ Dokumentacja dla knockout.js jest nowa, może być konieczne utworzenie początkowych wersji tych pokrewnych tematów.
Wersje
| Wersja | Notatki | Data wydania |
|---|---|---|
| 3.4.2 | Poprawki błędów | 2017-03-06 |
| 3.4.1 | Poprawki błędów | 08.11.2016 |
| 3.4.0 | 17.11.2015 | |
| 3.3.0 | 18.02.2015 | |
| 3.2.0 | Wprowadzono wiązanie component | 2014-08-12 |
| 3.1.0 | 2014-05-14 | |
| 3.0.0 | Zobacz także: uaktualnienia (od wersji 2.x) | 2013-10-25 |
| 2.3.0 | Ostatnia wersja 2.x. | 08.07.2013 |
| 2.0.0 | 21.12.2011 | |
| 1.2.1 | Ostatnia wersja 1.x. | 2011-05-22 |
| 1.0.0 | 2010-07-05 |
Instalacja lub konfiguracja
Knockout jest dostępny na większości platform JavaScript lub jako samodzielny skrypt.
Uwzględnij jako skrypt
Możesz pobrać skrypt ze strony pobierania , a następnie dołączyć go do swojej strony za pomocą standardowego script tag
<script type='text/javascript' src='knockout-3.4.0.js'></script>
Korzystanie z CDN
Możesz także dołączyć nokaut z Microsoft CDN lub CDNJS
<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
LUB
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
Zainstaluj z npm
npm install knockout
opcjonalnie możesz dodać parametr --save , aby zachować go w pliku package.json
Zainstaluj z altany
bower install knockout
opcjonalnie możesz dodać parametr --save , aby zachować go w pliku bower.json
Zainstaluj z NuGet
Install-Package knockoutjs
Rozpoczęcie pracy: Witaj świecie!
Tworzenie dokumentu HTML i włączenie knockout.js
Utwórz plik HTML i dołącz knockout.js za pomocą <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>
Dodaj drugi tag <script> pod skryptem nokautowym. W tym znaczniku skryptu zainicjujemy model widoku i zastosujemy powiązania danych do naszego dokumentu.
<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>
Teraz kontynuuj tworzenie widoku , dodając trochę HTML do treści:
<section>
<h1 data-bind="text: appHeading"></h1>
<p>Greeting: <input data-bind="textInput: greeting" /></p>
<p>Name: <input data-bind="textInput: name" /></p>
</section>
Po otwarciu dokumentu HTML i wykonaniu skryptów zobaczysz stronę z napisem Hello, World! . Po zmianie słów w elementach <input> <h1> tekst <h1> jest automatycznie aktualizowany.
Jak działa utworzony plik
- Debugowana wersja nokautu jest ładowana z zewnętrznego źródła (cdnjs)
Kod:
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
- Tworzona jest instancja viewmodel, która ma obserwowalne właściwości. Oznacza to, że nokaut jest w stanie wykryć zmiany i odpowiednio zaktualizować interfejs użytkownika.
Kod:
var appVM = new ViewModel();
- Knockout sprawdza DOM pod kątem atrybutów
data-bindi aktualizuje interfejs użytkownika za pomocą dostarczonego viewmodelu.
Kod:
ko.applyBindings(appVM);
- Gdy napotka powiązanie
text, nokaut używa wartości właściwości zdefiniowanej w powiązanym modelu widoku do wstrzyknięcia węzła tekstowego:
Kod:
<h1 data-bind="text: appHeading"></h1>
Obliczone obserwowalne
Obliczone obserwowalne to funkcje, które mogą „obserwować” lub „reagować” na inne obserwowalne w modelu widoku. Poniższy przykład pokazuje, w jaki sposób wyświetlisz całkowitą liczbę użytkowników i średni wiek.
Uwaga: Poniższy przykład może również korzystać z funkcji pureComputed () (wprowadzonej w wersji 3.2.0), ponieważ funkcja po prostu oblicza coś na podstawie innych właściwości modelu widoku i zwraca wartość.
<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);