Zacznij korzystać z Knockout.js

Coraz powszechniejsze staje się przenoszenie najtrudniejszej części aplikacji na stronę kliencką, przez co języki serwerowe spychane są tylko do tych, które obsługują trwałość poprzez usługi ODPOCZYNEK.
Część odpowiedzialności za to wszystko spada na nowe sposoby pracy z JavaScript oraz generowanie dynamicznych i responsywnych interfejsów użytkownika, dzięki różnym frameworki istniejący.
Rama ta ma wiele mocnych stron, takich jak niska waga i dokumentacja, a także fakt, że istnieje na rynku od dawna, więc konsekwentnie dojrzewała, aby móc ją stosować w środowiskach produkcyjnych.
1- Jak większość bibliotek i frameworków JavaScript wymagania nie są tak wymagające, w tym przypadku będziemy potrzebować małego serwera WWW, aby lepiej przetwarzać nasze żądania, może być Wamp w Okna lub wystąpienie Apache w Linux lub Prochowiec.
2- Potrzebujemy bogatego edytora tekstu w stylu Wzniosły tekst lub Notatnik ++ aby móc napisać niezbędny kod, aby wypełnić przykłady i ćwiczenia, które będziemy pokazywać.
3- Wreszcie potrzebujemy dostępu do Internetu, aby móc pobierać Knockout.js nawet raz.
Proces instalacji jest dość prosty i nie zależy od konkretnej platformy, proces będzie taki sam niezależnie od tego, czy jesteśmy w Windows, Linux lub MAC.
Pierwszą rzeczą, którą musimy zrobić, to pobrać Knockout.js z jego oficjalnej strony, w tym celu możemy przejść na stronę projektu oraz w dziale pliki do pobrania klikamy prawym przyciskiem myszy i wybieramy opcję Zapisz link jako:

POWIĘKSZAĆ

Ważne jest, abyśmy zapisali plik w odpowiednim dla naszego projektu folderze, aby go dołączyć. Można go również zainstalować za pomocą Altana lub nawet użyj go z dowolnego z CDN usług, aby nie musieć używać naszego serwera jako repozytorium biblioteki.
Gdy już mamy plik, po prostu musimy go dołączyć do pliku HTML następująco:

 Instalowanie Knockout.js 

Jak widać, wystarczyło dołączyć pobrany plik za pomocą tagu skryptu. W przypadku, gdy chcemy pracować z wersją CDN Musimy tylko zmienić ścieżkę lokalną na ścieżkę internetową pliku, jest to bardzo podobne do pracy z bibliotekami takimi jak jQuery lub frameworki takie jak AngularJS.
Widok modelu Widok modeluTytuł tej sekcji może wydawać się błędny. Jak można mówić o widoku modelu Model widoku? To nie jest to samo? Okazuje się, że Nokaut ma wzorzec projektowy lub paradygmat rozwoju, z którego czerpie inspirację MVC, gdzie z pewnością Model i Pogląd zachowują się jak to, co znamy z „klasycznego” podejścia, jednak mamy nową warstwę o nazwie ZobaczModel który jest odpowiedzialny za łączenie i nadawanie funkcjonalności naszym poglądom.
Wiązanie danych jest główną cechą naszego frameworka, która pozwala nam wskazać dokument HTML do jakich elementów musisz przyznać dostęp Knockout.js, choć brzmi to jak coś złożonego, możemy podsumować to jako coś prostszego, jest to proste nałożenie właściwości na elementy drzewa SŁOŃCE gdzie chcemy, żeby miał wydajność Knockout.js.
Zobaczmy następujący przykładowy kod, powiedzmy, że chcemy wydrukować nazwę z naszego ZobaczModel na etykiecie wewnątrz ciało, w tym celu musimy tylko wykonać następujące czynności:

 Instalowanie Knockout.js 

Widzimy to w naszej etykiecie h1 istnieje tag span, a tag span ma właściwość, która nie jest natywna dla HTML co to jest nieruchomość? wiązanie danych, to nas łączy Knockout.js z naszym drzewo DOM w tym przypadku po prostu wskazaliśmy, że nazwa właściwości lub zmiennej powinna być wzięta z naszego ZobaczModel.
Jeśli uruchomimy nasz przykład w przeglądarce, otrzymamy wynik podobny do tego, który widzimy na poniższym obrazku:

Dzięki temu wykonaliśmy już naszą pierwszą aplikację za pomocą Knockout.js.
Do tej pory musieliśmy zdać sobie sprawę, że filozofia ZobaczModel jest ważną częścią pracy w Knockout.js, dlatego zamierzamy dalej zagłębiać się w ten temat.
Stworzenie VistaModeluIstnieją dwa sposoby tworzenia Widoku Modelu, podstawowy i obiektowy, z którego już korzystamy, zależy od naszego sposobu tworzenia, chociaż zalecany jest zorientowany obiektowo bo choć na początku jest bardziej złożona, pozwala nam osiągnąć lepszy porządek w naszej aplikacji.
Stworzyć ZobaczModel podstawowe musimy po prostu zrobić coś takiego:

 var myModelView = {imię: 'Pedro Perez'};

Jak widzimy, nie jest to wcale skomplikowane, po prostu definiujemy zmienną i umieszczamy na niej treść stylu. JSON.
Teraz sposób zorientowany obiektowo pozwala nam tworzyć metody dostępu i manipulacji właściwościami, które chcemy umieścić w naszym ZobaczModel, w tym celu możemy zrobić coś takiego:

 var myOOOOOOFModelView = function () {var self = to; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};

Jeśli chcemy w tym przypadku możemy bezpośrednio uzyskać dostęp do imienia lub nazwiska indywidualnie lub skorzystać z metody pobierzNazwę () co daje nam imię i nazwisko połączone lub połączone.
Tutaj wielu może się zastanawiać, czy nie było łatwiej zrobić solo Strunowy Z imieniem i nazwiskiem odpowiedź jest bardzo prosta, im więcej mamy opcji, tym prostsza będzie naszym zdaniem aplikacja, wyobraźmy sobie, że chcieliśmy tylko imię, przy podstawowej formie musielibyśmy przetworzyć ciąg w stanie je rozdzielić, w zmianie zorientowanej obiektowo mamy dostęp tylko do tej właściwości, która nas interesuje.
Do tej pory to, co widzieliśmy, jest bardzo statyczne, co jeśli teraz zaczniemy używać parametrów, w ten sposób a ZobaczModel Może służyć wielu celom, ponieważ nie ograniczamy się do tego, co ustalimy, ale możemy zmieniać dane w zależności od sytuacji.
Przepiszmy nasz kształt zorientowany obiektowo, a użyjemy następującego formularza:

 var myOOOOOOOFModelView = function (imię, nazwisko) {var self = this; self.name = nazwa; self.nazwisko = nazwisko; self.getName = function () {return self.name + '' + self.last name; };};

Jak widzieliśmy bardzo łatwo było zaimplementować użycie parametrów, teraz zaimplementujemy to w naszym pierwszym przykładzie i tym samym zobaczymy, jak wszystko pasuje na swoje miejsce, do tego użyjemy następującego kodu HTML:

 Instalowanie Knockout.js 

Tutaj pierwszą rzeczą, którą zauważamy, jest to, że wiązanie danych nie jest już dłużej tekst jak w początkowym przykładzie jeśli nie używamy html, to pozwala nam wysyłać etykiety html a tym samym być w stanie nadać więcej stylu naszej odpowiedzi od ZobaczModel.
Już w sekcji, w której definiujemy nasze ZobaczModel widzimy, że przed zastosowaniem wiążący z Knockout.js, tworzymy instancję naszego ViewModel zorientowany obiektowo, To w tym momencie możemy nadać wartości naszym parametrom lub właściwościom, jak widać zachowaliśmy separację imienia i nazwiska, ale w końcu możemy użyć metody, która je łączy.
Po uruchomieniu naszego przykładu w przeglądarce otrzymujemy następujące wyniki:

Będą tacy, którzy będą się zastanawiać, co ten framework ma, czego jeszcze nie oferuje AngularJS lub Backbone.jsi mają rację w swoich pytaniach, jednak odpowiadamy im, że jest to jeszcze jedna opcja, którą mogą mieć do dyspozycji, ma to swoje atuty, takie jak dobra dokumentacja i niska waga jej realizacji (tylko około 20). kb), Ale jak wszystko, każdy ma swobodę wyboru narzędzia, które pozwoli mu osiągnąć swoje cele i które najlepiej odpowiada wymaganiom chwili.
Na tym kończymy nasz samouczek, pomyślnie podjęliśmy pierwsze kroki z Knockout.js, dzięki temu możemy zacząć myśleć o wszystkich możliwościach, jakie oferuje nam ten framework do tworzenia aplikacji z logiką po stronie klienta.