Dostęp do danych zewnętrznych za pomocą Knockout.js

W przypadku większości aplikacji internetowych fakt możliwości zbierania danych wprowadzanych przez użytkownika za pośrednictwem formularzy jest ich główną funkcją, ale można to pominąć, jeśli aplikacja jako taka nie może wysyłać ani odbierać danych na serwer.

Dlatego istnieją języki po stronie serwera lub przetwarzanie a JSON aby pomóc nam w tym zadaniu, gdzie na potrzeby tego samouczka użyjemy jQuery jako framework JavaScript do przetwarzania JSON, który posłuży do zastąpienia języka po stronie serwera i dostarczy nam danych wejściowych do przetworzenia w naszym modelu.

Wymagania

Będziemy musieli mieć Knockout.js w naszym systemie i dostępnych dla aplikacji, które zamierzamy stworzyć, również potrzebujemy jQuery które możemy wykorzystać lokalnie lub z twojego CDN. Uprawnienia do zapisu plików, połączenie internetowe w celu uzyskania bibliotek, jeśli ich nie posiadamy, oraz edytor tekstu, taki jak Wzniosły tekst lub Notatnik ++. Do uruchomienia aplikacji potrzebujemy serwera typu web Apache lub Nginx w naszym środowisku testowym.

Zaczniemy bezpośrednio pracować nad aplikacją i nie będziemy zagłębiać się w niektóre koncepcje użyte w przykładach, dlatego zalecamy zapoznanie się z samouczkami, które obejmują dynamiczne zmiany, obsługę formularzy i oczywiście powiązania z Knockout.js.

Odczytywanie danych zewnętrznych

Zamierzamy stworzyć prosty dokument HTML, który będzie zawierał bibliotekę Knockout.js jak również jQuery. Stworzymy nasz formularz, nie zapominając o tym wiązania elementów w nim i wreszcie w logice dla naszego ZobaczModel Stworzymy funkcję do obsługi zmian w naszym formularzu za pomocą elementów obserwowalnych, zobaczmy kod naszego HTML:

 Dane zewnętrzne
Pełne imię i nazwisko:

Nazwisko:
Ulubione zajęcia:
Prześlij dane

Jak widzimy mamy dokument HTML Prosty z kilkoma elementami, składający się z dwóch pól tekstowych i listy wyboru, a jeśli jesteśmy obserwatorami, widzimy, że nasze obserwable są równie puste, na koniec zobaczmy, jak wygląda nasza wyjściowa forma:

Skoro mamy nasz formularz, to musimy nadać sens naszemu przykładowi i mieć możliwość załadowania danych zewnętrznych w naszej aplikacji, dlatego nasze obserwable są puste. Użyjmy metody jQuery o nazwie $ .getJSON () który otrzymuje JSON Jako dane wejściowe, w przypadku pracy z językiem po stronie serwera, musimy określić ścieżkę pliku, który wygeneruje go jako dane wyjściowe, w następujący sposób:

 self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }

Aby nie komplikować rzeczy, użyjemy a JSON już wygenerowane w naszej aplikacji, w tym celu tworzymy taką o następującej strukturze, która może zmieniać jej wartości, jeśli sobie tego życzą:

 {"imię": "Imię", "nazwisko": "Nazwisko", "aktywności": ["Rower", "Gry wideo", "Tworzenie stron internetowych"], "hobby": "Czytaj"}

Teraz możemy zmienić naszą poprzednią funkcję i przesłać ją jako parametr nazwę naszego pliku JSON, zobaczmy:

 self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }

Włączając tę ​​funkcję do naszego kodu, możemy zweryfikować działanie naszej metody $ .getJSON () a tym samym uzyskać jedną z wartości w niej zawartych, odpowiedź naszej aplikacji po naciśnięciu przycisku Załaduj dane, będzie po prostu wyświetlało nazwę.

Jak widzimy, nasza metoda działa doskonale, teraz pozostaje nam już tylko po uzyskaniu wartości naszego JSONa zawrzeć funkcję w naszym ZobaczModel i nawiąż korespondencję z identyfikatorami naszego formularza, zobaczmy jak wygląda nasz finalny kod:

 function UserViewModel () {var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobby = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); hobby (dane.hobby);}); }} ko.applyBindings (nowy UserViewModel ());

Teraz wystarczy uruchomić nasz przykład w przeglądarce i nacisnąć przycisk Prześlij dane które muszą natychmiast wypełnić pola naszego formularza wartościami JSON, Zobaczmy:

Jak widać zadziałało to idealnie i byliśmy w stanie odczytać dane zewnętrzne w kilku prostych linijkach kodu. Jest to całkiem przydatne z punktu widzenia użyteczności i funkcjonalności naszej aplikacji, ale możemy zrobić trochę więcej, możemy przechowywać dane w JSON i tym samym rozszerzyć funkcjonalność naszej aplikacji.

Przechowywanie danych

W przypadku konwencjonalnych aplikacji internetowych przechowywanie danych w formacie JSON jest tak proste, jak konwersja obiektów do tego formatu i przesłanie ich na serwer, ale w przypadku aplikacji korzystających Knockout.js sprawa jest nieco bardziej skomplikowana, ponieważ ZobaczModel używaj obserwowalnych zamiast normalnych właściwości JavaScript, ponieważ obserwowalne są funkcjami, a próba ich serializacji i wysłania na serwer może prowadzić do nieoczekiwanych wyników.

ko.toJSON ()W takich przypadkach mamy szczęście, ponieważ Knockout.js zapewnia proste i skuteczne rozwiązanie, funkcja ko.toJSON (), który zastępuje wszystkie właściwości obserwowalnych obiektów ich bieżącą wartością i zwraca wynik jako ciąg w formacie JSON.

Aby zaimplementować tę nową funkcjonalność w naszej aplikacji, utworzymy nowy przycisk w naszym formularzu o nazwie Zapisz dane a nasza funkcja będzie związana! Zapisz daneZobaczmy jak wygląda nasz kod z modyfikacjami:

 Dane zewnętrzne
Pełne imię i nazwisko:
Nazwisko:
Ulubione zajęcia:
Prześlij dane
Zapisz dane

Jeśli uruchomimy nasz przykład w przeglądarce, zobaczymy jak mamy nowy przycisk, ładujemy nasze wartości, które jeśli chcemy, możemy je zmodyfikować. Na koniec naciskamy odpowiedni przycisk, który powinien pokazać nam wartości w naszym formularzu jako ciąg w formacie JSON, zobaczmy jak to wygląda:

POWIĘKSZAĆ

Na koniec, jeśli chcemy, aby te dane zostały przesłane do skryptu na naszym serwerze, musimy jedynie dokonać pewnych zmian w naszej nowo utworzonej funkcji i przy korzystaniu z metody $ .post kończymy proces, na koniec zobaczmy jak to wygląda:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informacja została wysłana na serwer");}); }

Mapowanie danych do modeli widoków

Sposób, w jaki obsługujemy nasze informacje z JSON, to wszystko, czego potrzebujemy do tworzenia niezawodnych aplikacji i implementowania dowolnego rodzaju rozwiązania niezależnego od języka po stronie serwera, o ile są one obsługiwane za pomocą JSON.

Ale możemy pójść trochę dalej i automatycznie zmapować dane JSON z serwera do naszego ZobaczModel i możemy to osiągnąć dzięki wtyczce do Knockout.js zwany mapowanie nokautów. Aby zacząć z niego korzystać, musimy najpierw pobrać go z jego repozytorium na GitHubie, rozpakować w naszym projekcie i dołączyć po naszym frameworku, aby uniknąć błędów związanych z brakiem zależności.

Teraz musimy tylko zmodyfikować nasz kod i usunąć nasz przycisk Załaduj dane, a także cała logika Knockout.js, ponieważ dzięki naszej wtyczce uzyskanie informacji będzie znacznie prostsze, zobaczmy nasz ostateczny kod:

 Dane zewnętrzne
Pełne imię i nazwisko:
Nazwisko:
Ulubione zajęcia:

Jak widać, nasza logika została zredukowana do zaledwie trzech linii kodu, co robi, gdy nasza aplikacja się ładuje, od razu wykonuje żądanie Ajaks z JSON które muszą korespondować z elementami naszej formy. To zabiera rodzime obiekty JavaScript i przekształca każdą właściwość w obserwowalny, unikając wszystkich tych wierszy kodu i czyniąc nie tylko bardziej niezawodną naszą aplikację, ale także nasz kod bardziej czytelny.

Na koniec, jeśli uruchomimy naszą aplikację, widzimy, jak automatycznie nasze wartości ładują się w naszym formularzu i widzimy żądanie Ajaks wraz z odpowiedzią JSON, jeśli korzystamy z konsoli przeglądarki:

W ten sposób zakończyliśmy ten tutorial, w którym mogliśmy zobaczyć jak Knockout.js oferuje nam sposób wysyłania i przechowywania danych niezależnie od używanego języka po stronie serwera, daje nam to większą swobodę w naszej implementacji, zmieniając jedynie język serwera na PHP, Ruby lub Python aby wymienić tylko kilka.