Knockout

Knockout
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>
  
1 Szukasz specjalistów IT?
Oddzwonimy do Ciebie!