piątek, 21 września 2012

[HTML|JS|CSS] KnockoutJS: Wprowadzenie

KnockoutJS to biblioteka JavaScript wspomagająca tworzenie dynamicznych interfejsów użytkownika. Aplikacje to tworzone są w oparciu o znany chcociażby z WPF wzorzec MVVM.  Biblioteka dostępna jest na licencji MIT (open source), nie zawiera zależności (można z niej korzystać np. w połączeniu z jQuery) oraz wspierana jest przez wszystkie nowoczesne przeglądarki. Kolejną zaletą jest porządnie sporządzona dokumentacja dostępna tutaj. Główne cztery zalety biblioteki:

  1. Deklaratywny data binding - za pomocą prostych składniowo wyrażeń możemy powiązać elementy modelu DOM z modelem danych
  2. Automatyczne odświeżanie interfejsu - każda zmiana modelu danych powoduje odświeżenie dokumentu
  3. Śledzenie zależności - zmiana jednej wartości powoduje zmianę całego łańcucha wartości od niej zależnych
  4. Tworzenie szablonów - tworzenie zagnieżdżonych interfejsów, jako metod modelu danych
Pierwsza strona korzystająca z ViewModelu poniżej:

View(HTML):

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
 <strong>Hello,</strong>
 <strong data-bind="text: firstName"></strong>
 <strong data-bind="text: lastName"></strong>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
 <script src="scripts/myscript.js"></script>
</body>
</html>


ViewModel(JavaScript):

function AppViewModel() {
    this.firstName = "John";
    this.lastName = "Doe";
}

ko.applyBindings(new AppViewModel());

Zatem, aby korzystać z Knockouta należy w htmlu osadzić atrybuty data-bind, w których podajemy property z viewModelu. W kodzie JavaScriptu należy stworzyć VewModel w postaci funkcji, a następnie zastosować go przy użyciu metody applyBindings, gdzie ko jest aliasem biblioteki.
Autor: o
Etykiety: , , , , , , ,

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)