Åtkomst till extern data med Knockout.js

För de flesta webbapplikationer är det faktum att de kan samla in användarinmatning via formulär deras huvudsakliga funktion, men detta kan lämnas åt sidan om applikationen som sådan inte kan skicka eller ta emot data till servern.

Det är därför det finns serversidor eller bearbetning av a JSON för att hjälpa oss i den här uppgif.webpten, där vi kommer att använda för denna handledning jQuery som ett JavaScript-ramverk för att utföra behandlingen av en JSON, som kommer att tjäna till att ersätta språket på serversidan och kommer att ge oss datainmatning som ska bearbetas i vår modell.

Krav

Vi kommer att behöva ha Knockout.js i vårt system och tillgängligt för de applikationer som vi ska skapa, behöver vi också jQuery som vi kan använda lokalt eller från ditt CDN. Behörighet att skriva filer, en internetanslutning för att få biblioteken om vi inte har dem och en textredigerare som t.ex. Sublim text eller NotePad ++. För att köra applikationerna behöver vi en webbservertyp Apache eller Nginx i vår testmiljö.

Vi kommer att börja arbeta med programmet direkt och kommer inte att fördjupa oss i några av de begrepp som används i exemplen, så vi rekommenderar att du går igenom självstudierna som involverar dynamiska förändringar, formulärhantering och naturligtvis bindningar med Knockout.js.

Läser extern data

Vi ska skapa ett enkelt HTML -dokument som innehåller biblioteket Knockout.js såväl som jQuery. Vi kommer att skapa vårt formulär utan att glömma att göra det bindningar av elementen i den och slutligen i logiken för vår ViewModel Vi kommer att skapa funktionen för att hantera ändringarna i vår form med observationerna, låt oss se koden för vår HTML:

 Externa data
Fullständiga namn:

Efternamn:
Favorit aktiviteter:
Ladda upp data

Som vi ser har vi ett dokument HTML Enkelt med några element, bestående av två textfält och en urvalslista, och om vi är observatörer kan vi se att våra observerbara är lika tomma, för att avsluta får vi se hur vår ursprungliga form ser ut:

Eftersom vi har vår form måste vi förstå vårt exempel och det är för att kunna ladda externa data i vår applikation, det är därför våra observationer är tomma. Låt oss använda den kallade jQuery -metoden $ .getJSON () som får en JSON Som inmatning, om vi arbetade med ett språk på serversidan måste vi ange sökvägen till filen som ska generera den som utmatning enligt följande:

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

För att inte komplicera saker kommer vi att använda a JSON redan genererat i vår applikation, för detta skapar vi en med följande struktur som kan variera dess värden om de vill:

 {"förnamn": "Förnamn", "efternamn": "Efternamn", "aktiviteter": ["Cykel", "Videospel", "Webbutveckling"], "hobbies": "Läs"}

Nu kan vi ändra vår tidigare funktion och skicka den som parameter namnet på vår JSON -fil, låt oss se:

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

Genom att inkludera denna funktion i vår kod kan vi verifiera hur vår metod fungerar $ .getJSON () och få därmed ett av värdena i det, svaret från vår applikation när du trycker på knappen Ladda data, det kommer helt enkelt att visa namnet.

Eftersom vi ser att vår metod fungerar perfekt, nu måste vi först efter att ha fått värdena för vår JSON att inkludera funktionen i vår ViewModel och gör korrespondensen med identifierarna i vårt formulär, låt oss se hur vår slutliga kod ser ut:

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

Nu behöver vi bara köra vårt exempel i webbläsaren och trycka på knappen Ladda upp data som måste fylla i fälten i vårt formulär omedelbart med värdena för JSON, låt oss se:

Som vi kan se fungerade det perfekt och vi kunde läsa externa data i några enkla kodrader. Detta är ganska användbart när det gäller användbarhet och funktionalitet i vår applikation men vi kan göra lite mer, vi kan lagra data i en JSON och därmed utöka funktionaliteten i vår applikation.

Lagra data

För konventionella webbapplikationer är lagring av data i JSON -format lika enkelt som att konvertera objekt till det formatet och skicka dem till servern, men för applikationer som använder Knockout.js frågan är lite mer komplicerad eftersom ViewModel använd observerbara i stället för normala JavaScript -egenskaper, eftersom observerbara är funktioner och försöker att serialisera dem och skicka dem till servern kan leda till oväntade resultat.

ko.toJSON ()För dessa fall har vi tur, eftersom Knockout.js ger en enkel och effektiv lösning, funktionen ko.toJSON (), som ersätter alla egenskaper hos de observerbara objekten med deras nuvarande värde och returnerar resultatet som en sträng i formatet JSON.

För att implementera denna nya funktionalitet i vår applikation kommer vi att skapa en ny knapp i vårt formulär som heter Spara data och vår funktion kommer att vara bunden spara dataLåt oss se hur vår kod ser ut med ändringarna:

 Externa data
Fullständiga namn:
Efternamn:
Favorit aktiviteter:
Ladda upp data
Spara data

Om vi ​​kör vårt exempel i webbläsaren ser vi hur vi har en ny knapp, vi laddar våra värden, som om vi vill kan vi ändra dem. Slutligen trycker vi på motsvarande knapp som ska visa oss värdena i vår form som en sträng i format JSON, låt oss se hur det ser ut:

FÖRSTORA

Slutligen, om vi vill att dessa data ska skickas till ett skript på vår server, behöver vi bara göra några ändringar i vår nyskapade funktion och när vi använder metoden $ .post vi slutför processen, för att avsluta låt oss se hur det ser ut:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informationen har skickats till servern");}); }

Datakartläggning för att visa modeller

Sättet vi hanterar vår information från en JSON är allt vi behöver för att skapa robusta applikationer och implementera alla slags språkoberoende lösning på serversidan, så länge de hanteras med JSON.

Men vi kan gå lite längre och automatiskt kartlägga JSON -data från servern till vår ViewModel och vi kan uppnå detta med en plug-in för Knockout.js kallad knockout-kartläggning. För att börja använda det måste vi först ladda ner det från dess förråd på GitHub, packa upp det i vårt projekt och inkludera det efter vårt ramverk för att undvika fel på grund av bristen på beroenden.

Nu måste vi bara ändra vår kod och ta bort vår knapp Ladda data, liksom all logik i Knockout.js, eftersom tack vare vårt plug-in att få informationen blir mycket lättare, låt oss se vår slutliga kod:

 Externa data
Fullständiga namn:
Efternamn:
Favorit aktiviteter:

Som vi kan se reducerades vår logik till endast tre rader kod, vilket det gör när vår applikation laddas, det gör omedelbart en begäran Ajax av JSON som måste överensstämma med elementen i vår form. Detta tar de inhemska föremålen för JavaScript och förvandlar varje egendom till en observerbar, undviker alla dessa kodrader och gör inte bara vår applikation mer robust utan vår kod mer läsbar.

För att avsluta om vi kör vår applikation ser vi hur automatiskt våra värden laddas i vårt formulär och vi kan se begäran Ajax tillsammans med svaret JSON om vi använder webbläsarkonsolen:

Så här avslutade vi denna handledning, där vi kunde se hur Knockout.js erbjuder oss ett sätt att skicka och lagra data oavsett vilket serverspråk som används, det ger oss större frihet i vår implementering genom att bara ändra serverns språk till PHP, Ruby eller Python för att nämna några.