Toegang krijgen tot externe gegevens met Knockout.js

Voor de meeste webapplicaties is het kunnen verzamelen van gebruikersinvoer via formulieren hun belangrijkste functie, maar dit kan buiten beschouwing worden gelaten als de applicatie als zodanig de gegevens niet naar de server kan verzenden of ontvangen.

Daarom zijn er server-side talen of de verwerking van a JSON om ons te helpen bij deze taak, waar we voor de doeleinden van deze tutorial zullen gebruiken jQuery als een JavaScript-framework om de verwerking van een JSON uit te voeren, die zal dienen om de server-side taal te vervangen en ons zal voorzien van gegevensinvoer die in ons model moet worden verwerkt.

Vereisten

We zullen moeten hebben Knockout.js in ons systeem en toegankelijk voor de applicaties die we gaan maken, hebben we ook nodig jQuery die we lokaal of vanaf uw CDN kunnen gebruiken. Machtigingen om bestanden te schrijven, een internetverbinding om de bibliotheken te verkrijgen als we ze niet hebben, en een teksteditor zoals: Sublieme tekst of Kladblok ++. Om de applicaties uit te voeren, hebben we een webservertype nodig Apache of Nginx in onze testomgeving.

We zullen direct aan de applicatie gaan werken en zullen niet ingaan op enkele van de concepten die in de voorbeelden worden gebruikt, dus we raden aan om door de tutorials te lopen die dynamische wijzigingen, formulierverwerking en natuurlijk bindingen met Knockout.js.

Externe gegevens lezen

We gaan een eenvoudig HTML-document maken met daarin de bibliotheek van: Knockout.js net zoals jQuery. We zullen ons formulier maken zonder te vergeten de bindingen van de elementen erin en tenslotte in de logica voor onze BekijkModel We zullen de functie maken om de wijzigingen in ons formulier met de waarneembare gegevens te verwerken, laten we de code voor onze HTML bekijken:

 Externe gegevens
Voor-en achternaam:

Achternaam:
Favoriete activiteiten:
Gegevens uploaden

Zoals we zien hebben we een document HTML Eenvoudig met een paar elementen, bestaande uit twee tekstvelden en een selectielijst, en als we waarnemers zijn, kunnen we zien dat onze waarneembare objecten even leeg zijn, om af te sluiten, laten we eens kijken hoe onze oorspronkelijke vorm eruit ziet:

Omdat we ons formulier hebben, moeten we ons voorbeeld begrijpen en het is om externe gegevens in onze applicatie te kunnen laden, daarom zijn onze waarneembare gegevens leeg. Laten we de jQuery-methode gebruiken genaamd $ .getJSON () die ontvangt een JSON Als invoer, in het geval dat we met een server-side taal werkten, moeten we het pad van het bestand dat het als uitvoer zal genereren als volgt specificeren:

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

Om de zaken niet ingewikkelder te maken, gebruiken we a JSON al gegenereerd in onze applicatie, hiervoor maken we er een met de volgende structuur die de waarden kan variëren als ze dat willen:

 {"voornaam": "Voornaam", "achternaam": "Achternaam", "activiteiten": ["Fiets", "Videogames", "Webontwikkeling"], "hobby's": "Lezen"}

Nu kunnen we onze vorige functie wijzigen en deze als parameter de naam van ons JSON-bestand sturen, laten we eens kijken:

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

Door deze functie in onze code op te nemen, kunnen we verifiëren hoe onze methode werkt $ .getJSON () en verkrijg zo een van de waarden erin, de reactie van onze applicatie bij het indrukken van de knop Laad gegevens, het zal gewoon de naam tonen.

Zoals we zien werkt onze methode perfect, nu hoeven we alleen na het verkrijgen van de waarden van onze JSON de functie op te nemen in onze BekijkModel en maak de correspondentie met de identifiers van ons formulier, laten we eens kijken hoe onze uiteindelijke code eruit ziet:

 functie UserViewModel () {var self = this; zelf.naam = ko.waarneembaar (""); zelf.achternaam = ko.waarneembaar (""); zelf.activiteiten = ko.observableArray ([]); zelf.hobby's = ko.waarneembaar (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); zelf.hobby's (data.hobby's);}); }} ko.applyBindings (nieuw UserViewModel ());

Nu hoeven we alleen ons voorbeeld in de browser uit te voeren en op de knop te drukken Gegevens uploaden die de velden van ons formulier onmiddellijk moet invullen met de waarden van de JSON, laten we kijken:

Zoals we kunnen zien, werkte het perfect en konden we externe gegevens in een paar eenvoudige regels code lezen. Dit is best handig in termen van bruikbaarheid en functionaliteit van onze applicatie, maar we kunnen iets meer doen, we kunnen de gegevens opslaan in een JSON en zo de functionaliteit van onze applicatie uitbreiden.

De gegevens opslaan

Voor conventionele webapplicaties is het opslaan van de gegevens in JSON-formaat net zo eenvoudig als het converteren van objecten naar dat formaat en verzenden naar de server, maar in het geval van applicaties die Knockout.js het probleem is een beetje ingewikkelder omdat de BekijkModel gebruik observables in plaats van normale JavaScript-eigenschappen, aangezien observables functies zijn en het proberen om ze te serialiseren en naar de server te sturen tot onverwachte resultaten kan leiden.

ko.toJSON ()Voor deze gevallen hebben we geluk, aangezien Knockout.js biedt een eenvoudige en effectieve oplossing, de functie ko.toJSON (), die alle eigenschappen van de waarneembare objecten vervangt door hun huidige waarde en het resultaat als een tekenreeks in de indeling retourneert JSON.

Om deze nieuwe functionaliteit in onze applicatie te implementeren, gaan we een nieuwe knop maken in ons formulier genaamd Gegevens opslaan en onze functie zal gebonden zijn saveDataLaten we eens kijken hoe onze code eruit ziet met de aanpassingen:

 Externe gegevens
Voor-en achternaam:
Achternaam:
Favoriete activiteiten:
Gegevens uploaden
Gegevens opslaan

Als we ons voorbeeld in de browser uitvoeren, zien we hoe we een nieuwe knop hebben, we laden onze waarden, die we, als we willen, kunnen wijzigen. Ten slotte drukken we op de overeenkomstige knop die ons de waarden in ons formulier als een tekenreeks in formaat zou moeten tonen JSON, laten we eens kijken hoe het eruit ziet:

VERGROTEN

Ten slotte, als we willen dat deze gegevens naar een script op onze server worden verzonden, hoeven we alleen enkele wijzigingen aan te brengen in onze nieuw gemaakte functie en bij het gebruik van de methode $ .post we voltooien het proces, om te voltooien laten we eens kijken hoe het eruit ziet:

 self.gsaveData = functie () {var data_submit = {userData: ko.toJSON (zelf)}; $ .post ("/ save-data", data_send, function (data) {alert ("De informatie is naar de server verzonden");}); }

Gegevenstoewijzing om modellen te bekijken

De manier waarop we onze informatie van een JSON verwerken, is alles wat we nodig hebben om robuuste applicaties te maken en elke vorm van taalonafhankelijke server-side oplossing te implementeren, zolang ze maar met JSON worden afgehandeld.

Maar we kunnen nog iets verder gaan en automatisch de JSON-gegevens van de server toewijzen aan onze BekijkModel en we kunnen dit bereiken met een plug-in voor Knockout.js genaamd knock-out-mapping. Om het te gaan gebruiken, moeten we het eerst downloaden van de repository op GitHub, het uitpakken in ons project en het na ons raamwerk opnemen om fouten te voorkomen vanwege het ontbreken van afhankelijkheden.

Nu hoeven we alleen onze code aan te passen en onze knop te verwijderen Gegevens laden, evenals alle logica van Knockout.js, omdat dankzij onze plug-in het verkrijgen van de informatie veel gemakkelijker zal zijn, laten we onze definitieve code bekijken:

 Externe gegevens
Voor-en achternaam:
Achternaam:
Favoriete activiteiten:

Zoals we kunnen zien, is onze logica teruggebracht tot slechts drie regels code, wat het doet wanneer onze applicatie wordt geladen, het doet onmiddellijk een verzoek Ajax van de JSON die moet overeenkomen met de elementen van onze vorm. Dit neemt de oorspronkelijke objecten van JavaScript en transformeert elke eigenschap in een waarneembare, waarbij al die regels code worden vermeden en niet alleen onze applicatie robuuster wordt, maar ook onze code leesbaarder.

Om te eindigen als we onze applicatie uitvoeren, zien we hoe automatisch onze waarden in ons formulier worden geladen en kunnen we het verzoek zien Ajax samen met de respons-JSON als we de browserconsole gebruiken:

Dit is hoe we deze tutorial hebben voltooid, waar we konden zien hoe Knockout.js biedt ons een manier om gegevens te verzenden en op te slaan, ongeacht de server-side taal die wordt gebruikt, dit geeft ons meer vrijheid in onze implementatie door alleen de taal van de server te veranderen in PHP, Ruby of Python om er een paar te noemen.