Knockout to jedna z bibliotek języka JavaScript. Stanowi jego autonomiczną implementację z wzorcem MVC (Model-View-Control). Knockout został opracowany przez pracownika firmy Microsoft – Steve Sanderson’a i jednocześnie utrzymany jako projekt open-source co oznacza, że każdy ma swobodny dostęp do dokumentacji i kodów źródłowych. Warto dodać, że jest biblioteką w pełni udokumentowaną, posiada między innymi dokumenty interfejsu API, mnóstwo interaktywnych samouczków czy też przykładów, które programista może testować na żywo. Jest to zdecydowanie najszybszy i najbardziej przyjemny sposób na rozpoczęcie pracy z Knockout. Wydany został na licencji MIT (licencja X11). Biblioteka ta przede wszystkim pomaga tworzyć bogate interfejsy użytkowników. Główne idee jej to:
- deklaracyjne powiązania – czyli programiści mogą łatwo skojarzyć elementy DOM z danymi modelu za pomocą zwięzłej i czytelnej składni
- automatyczne odświeżanie interfejsu użytkownika – w momencie gdy stan modelu danych ulega zmianom, interfejs użytkownika zostaje w sposób automatyczny zaktualizowany
- śledzenie zależności – czyli ustanawia pośrednio wszystkie łańcuchy relacji między danymi modelowymi, przekształca je oraz łączy
- templating (templowanie) – czyli szybkie generowanie zagnieżdżonych interfejsów użytkownika w zależności od danych w modelu.
Knockout charakteryzuje się również wyraźnie oddzielonymi danymi domenowymi czy obecnością jasno określonej warstwy wyspecjalizowanego kodu w celu zarządzania relacjami między elementami widoku. Oznacza to, że wykorzystuje on wtedy funkcje zarządzania zdarzeniami w języku JavaScript. Funkcje te zdecydowanie usprawniają i ułatwiają specyfikację złożonych relacji pomiędzy elementami wspomnianego widoku. Sprawia to, że wyświetlacz jest dla nas bardziej elastyczny i wpływa na doświadczenia użytkowników. Oprócz tego implementuje niestandardowe zachowania jako nowe wiązania deklaratywne dzięki czemu wpływa na łatwe ponowne użycie w zaledwie kilku wierszach kodu.
Dodatkowo Knockout jako czysta biblioteka JavaScript współpracuje z dowolnym serwerem bądź wybraną technologią po stronie klienta. Plusem dla programistów jest to, że biblioteka jest zupełnie kompaktowa czyli zabiera zaledwie 13 kilobajtów czy też to, że działa z dowolną przeglądarką (między innymi: Firefox 2+, Chrome, IE 6+, Edge, Chrome czy wiele innych). Warto dodać, że wyposażona jest także w kompleksowy zestaw specyfikacji co oznacza, że jej prawidłowe funkcjonowanie można w łatwy sposób sprawdzić w nowych przeglądarkach czy platformach.
Przykładowy kod w Knockout
Knockout Przykład #1
<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>
<script type="text/javascript">
var ViewModel = function(name, surname) {
this.firstName = ko.observable(name);
this.lastName = ko.observable(surname);
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Robert", "Kubica"));
</script>
Knockout Przykład #2
<form data-bind="submit: addItem">
New item: <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"></select>
</form>
<script type="text/javascript">
var ListModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
ko.applyBindings(new ListModel(["Bike", "Motor", "Car", "Truck"]));
</script>