Přístup k externím datům pomocí Knockout.js

U většiny webových aplikací je skutečnost, že je možné shromažďovat vstupy uživatelů prostřednictvím formulářů, jejich hlavní funkcí, ale to může být ponecháno stranou, pokud aplikace jako taková nemůže odesílat nebo přijímat data na server.

Proto existují jazyky na straně serveru nebo zpracování souboru JSON aby nám pomohly v tomto úkolu, kde pro účely tohoto tutoriálu použijeme jQuery jako rámec JavaScriptu k provádění zpracování JSON, který bude sloužit jako náhrada jazyka na straně serveru a poskytne nám vstup dat, které budou zpracovány v našem modelu.

Požadavky

Budeme muset mít Knockout.js v našem systému a přístupné pro aplikace, které se chystáme vytvořit, také potřebujeme jQuery které můžeme použít lokálně nebo z vaší CDN. Oprávnění k zápisu souborů, internetové připojení k získání knihoven, pokud je nemáme, a textový editor, jako je Vznešený text nebo NotePad ++. Ke spouštění aplikací potřebujeme typ webového serveru Apache nebo Nginx v našem testovacím prostředí.

Začneme pracovat přímo na aplikaci a nebudeme se zabývat některými koncepty použitými v příkladech, takže doporučujeme projít si výukové programy, které zahrnují dynamické změny, zpracování formulářů a samozřejmě vazby s Knockout.js.

Čtení externích dat

Vytvoříme jednoduchý HTML dokument, který bude obsahovat knihovnu Knockout.js jakož i jQuery. Vytvoříme náš formulář, aniž bychom zapomněli provést vázání prvků v něm a nakonec v logice pro naše ViewModel Vytvoříme funkci, která bude zpracovávat změny v naší formě s pozorovatelnými, podívejme se na kód pro naše HTML:

 Externí data
Celé jméno:

Příjmení:
Oblíbené činnosti:
Nahrajte data

Jak vidíme, máme dokument HTML Jednoduché s několika prvky, skládající se ze dvou textových polí a výběrového seznamu, a pokud jsme pozorovatelé, můžeme vidět, že naše pozorovatelné položky jsou stejně prázdné. Na závěr se podívejme, jak vypadá naše počáteční forma:

Vzhledem k tomu, že máme svou formu, musíme dávat smysl našemu příkladu a to je být schopen načíst externí data do naší aplikace, proto jsou naše pozorovatelné prázdné. Pojďme použít metodu jQuery s názvem $ .getJSON () který dostává a JSON Jako vstup v případě, že jsme pracovali s jazykem na straně serveru, musíme zadat cestu k souboru, který jej vygeneruje jako výstup, následovně:

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

Abychom věci nekomplikovali, použijeme a JSON již vygenerované v naší aplikaci, proto vytvoříme jednu s následující strukturou, která může měnit své hodnoty, pokud si to přejí:

 {"first name": "First name", "last name": "Last name", "activities": ["Bicycle", "Videogames", "Web development"], "hobby": "Read"}

Nyní můžeme změnit naši předchozí funkci a odeslat jako parametr název našeho souboru JSON, podívejme se:

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

Zahrnutím této funkce do našeho kódu můžeme ověřit, jak naše metoda funguje $ .getJSON () a tím v něm získat jednu z hodnot, odezvu naší aplikace při stisknutí tlačítka Načtěte data, zobrazí se pouze název.

Jak vidíme, že naše metoda funguje perfektně, nyní musíme pouze po získání hodnot našeho JSONu zahrnout funkci do našeho ViewModel a proveďte korespondenci s identifikátory našeho formuláře, podívejme se, jak vypadá náš konečný kód:

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

Nyní stačí spustit náš příklad v prohlížeči a stisknout tlačítko Nahrajte data která musí okamžitě vyplnit pole našeho formuláře hodnotami JSON, uvidíme:

Jak vidíme, fungovalo to perfektně a byli jsme schopni přečíst externí data v několika jednoduchých řádcích kódu. To je docela užitečné z hlediska použitelnosti a funkčnosti naší aplikace, ale můžeme udělat trochu víc, můžeme data uložit do JSON a rozšířit tak funkčnost naší aplikace.

Ukládání dat

U konvenčních webových aplikací je ukládání dat ve formátu JSON stejně jednoduché jako převod objektů do tohoto formátu a jejich odeslání na server, ale v případě aplikací, které používají Knockout.js problém je o něco složitější, protože ViewModel místo běžných vlastností JavaScriptu používejte pozorovatelné, protože pozorovatelné jsou funkce a jejich pokus o serializaci a odeslání na server může vést k neočekávaným výsledkům.

ko.toJSON ()V těchto případech máme štěstí, protože Knockout.js poskytuje jednoduché a efektivní řešení, funkci ko.toJSON (), který nahradí všechny vlastnosti pozorovatelných objektů jejich aktuální hodnotou a vrátí výsledek jako řetězec ve formátu JSON.

K implementaci této nové funkce do naší aplikace vytvoříme nové tlačítko v našem formuláři s názvem Uložit data a naše funkce bude svázána uložit dataPodívejme se, jak náš kód vypadá s úpravami:

 Externí data
Celé jméno:
Příjmení:
Oblíbené činnosti:
Nahrajte data
Uložit data

Pokud spustíme náš příklad v prohlížeči, uvidíme, jak máme nové tlačítko, načteme naše hodnoty, které, pokud chceme, je můžeme upravit. Nakonec stiskneme odpovídající tlačítko, které by nám mělo ukázat hodnoty v našem formuláři jako řetězec ve formátu JSON, pojďme se podívat, jak to vypadá:

ZVĚTŠIT

Nakonec, pokud chceme, aby tato data byla odeslána do skriptu na našem serveru, musíme provést pouze některé změny v naší nově vytvořené funkci a při použití metody $ .post dokončíme proces, na závěr se podívejme, jak to vypadá:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informace byly odeslány na server");}); }

Mapování dat pro zobrazení modelů

Způsob, jakým nakládáme s našimi informacemi z JSONu, je vše, co potřebujeme k vytváření robustních aplikací a implementaci jakéhokoli řešení na jazyku nezávislého na serveru, pokud jsou zpracovávány pomocí JSON.

Můžeme ale jít o kousek dál a automaticky namapovat data JSON ze serveru na náš ViewModel a toho můžeme dosáhnout pomocí doplňku pro Knockout.js volala knockout-mapping. Abychom jej mohli začít používat, musíme jej nejprve stáhnout z jeho úložiště na GitHubu, rozbalit v rámci našeho projektu a zahrnout do našeho rámce, abychom se vyhnuli chybám kvůli nedostatku závislostí.

Nyní musíme pouze upravit náš kód a odstranit naše tlačítko Načíst data, stejně jako veškerá logika Knockout.js, protože díky našemu pluginu bude získávání informací mnohem snazší, podívejme se na náš konečný kód:

 Externí data
Celé jméno:
Příjmení:
Oblíbené činnosti:

Jak vidíme, naše logika byla zredukována pouze na tři řádky kódu, což znamená, že když se naše aplikace načte, okamžitě vytvoří požadavek Ajax z JSON které musí korespondovat s prvky naší formy. To vezme nativní objekty JavaScript a transformuje každou vlastnost na pozorovatelnou, vyhýbá se všem těm řádkům kódu a činí naši aplikaci nejen robustnější, ale náš kód čitelnější.

K dokončení, pokud spustíme naši aplikaci, vidíme, jak se automaticky načítají naše hodnoty v našem formuláři, a vidíme požadavek Ajax spolu s odpovědí JSON, pokud používáme konzolu prohlížeče:

Takto jsme zakončili tento tutoriál, kde jsme mohli vidět jak Knockout.js nabízí nám způsob odesílání a ukládání dat bez ohledu na jazyk na straně serveru, který je používán, což nám dává větší volnost při implementaci pouze změnou jazyka serveru na PHP, Ruby nebo Python abychom jmenovali alespoň některé.