Toegang tot externe gegevens

Voor de meeste webtoepassingen is het verzamelen van gebruikersinvoer relatief nutteloos als u die gegevens niet aan een server kunt doorgeven. In deze les leren we hoe we informatie van een server kunnen verzenden en ontvangen met behulp van AJAX-verzoeken. Dit zet de model- terug naar het Model-View-ViewModel-ontwerppatroon onder de vlag van Knockout.js.

Figuur 27: Het model toevoegen aan ons MVVM-patroon

Vergeet niet dat Knockout.js is ontworpen om compatibel te zijn met elke andere client-side of server-side technologie. Deze serie maakt gebruik van jQuery's $ .GetJSON () en $ .post () functies, maar u bent vrij om elk JavaScript-framework te gebruiken dat JSON-gegevens kan verzenden en ontvangen. Op dezelfde manier is de server-side scriptingtaal helemaal aan jou. In plaats van het presenteren van back-end codevoorbeelden, bevat deze les eenvoudigweg de JSON-gegevens die Knockout.js verwacht. Het genereren van deze uitvoer moet triviaal zijn om te implementeren in elke moderne scripttaal.

Een nieuw HTML-formulier

We gaan een nieuwe HTML-pagina gebruiken om te experimenteren met Knockout.js / AJAX-integratie. Omdat deze pagina moet communiceren met een server-side code, moet u ervoor zorgen dat deze toegankelijk is via de documentroot van uw lokale server. We beginnen met iets dat lijkt op de vorige les:

   Externe gegevens       Voornaam: 
 Achternaam: 
  Je favoriete eten:  Laad gegevens

Dit is een basisvorm met een paar velden zodat we kunnen zien hoe we informatie van de server kunnen verzenden en ontvangen. Merk op dat we de jQuery-bibliotheek ook vóór onze gewoonte opnemen

Vervolgens gaan we onze volledig vervangen PersonViewModel. In plaats daarvan gebruiken we jQuery's $ .GetJSON () methode om een aantal initiële gegevens van de server te laden en de plug-in voor de toewijzing dynamisch observabelen te laten genereren. Vervang de hele custom

Wanneer onze applicatie wordt geladen, wordt er onmiddellijk een AJAX-verzoek ingediend voor de eerste gebruikersgegevens. Uw server-side script voor / Get-aanvankelijke-data zou hetzelfde moeten retourneren als de voorbeeld JSON-uitvoer van het gedeelte Gegevens laden van deze les. Zodra de gegevens zijn geladen, maken we een ViewModel via ko.mapping.fromJS (). Hiermee wordt het native JavaScript-object opgehaald dat door het script wordt gegenereerd en wordt elke eigenschap omgezet in een waarneembaar object. Afgezien van de methoden saveUserData () en loadUserData (), heeft dit dynamisch gegenereerde ViewModel exact dezelfde functionaliteit als PersonViewModel.

Op dit moment hebben we alleen begonnen ons ViewModel met gegevens van de server. De mapping plug-in laat ons ook toe bijwerken een bestaand ViewModel op dezelfde manier. Laten we doorgaan en een expliciete toevoegen loadUserData () terug naar het ViewModel:

 viewModel.loadUserData = function () $ .getJSON ("/ get-user-data", functie (gegevens) ko.mapping.fromJS (data, viewModel););

In de oude versie van loadUserData (), we moesten elke gegevenseigenschap handmatig toewijzen aan zijn respectievelijke waarneembaar. Maar nu, de in kaart brengen plug-in doet dit allemaal voor ons. Merk op dat het doorgeven van het data-object als eerste argument aan ko.mapping.fromJS () ervoor zorgt dat dit gebeurt bijwerken het ViewModel in plaats van initialiseren het.

De toewijzingsinvoegtoepassing heeft alleen betrekking op het laden van gegevens, dus saveUserData () blijft onaangetast, behalve dat het moet worden toegewezen aan het viewModel-object:

 viewModel.saveUserData = function () var data_to_send = userData: ko.toJSON (viewModel); $ .post ("/ save-user-data", data_to_send, function (data) alert ("Uw gegevens zijn op de server gepost!"););

En nu zouden we terug moeten zijn naar waar we begonnen zijn aan het begin van deze sectie - zowel de Laad gegevens en Gegevens opslaan knoppen zouden moeten werken, en Knockout.js zou de weergave en ViewModel gesynchroniseerd moeten houden.

Hoewel dit geen noodzakelijke plug-in is voor alle Knockout.js-projecten, is de in kaart brengen plug-in maakt het mogelijk om te schalen naar complexe objecten zonder een extra regel code toe te voegen voor elke nieuwe eigenschap die u toevoegt aan uw ViewModel.

Samenvatting

In deze les hebben we geleerd hoe Knockout.js kan communiceren met een server-side script. De meeste AJAX-gerelateerde functionaliteit kwam van het jQuery-webraamwerk, hoewel Knockout.js wel een handige utiliteitsfunctie biedt voor het converteren van waarnemingen naar native JavaScript-eigenschappen. We hebben ook de mapping plug-in besproken, die een generieke manier bood om een native JavaScript-object naar een ViewModel te converteren met waarneembare eigenschappen.

Onthoud dat Knockout.js een pure client-side bibliotheek is. Het is alleen voor het verbinden van JavaScript-objecten (ViewModels) met HTML-elementen. Zodra u deze relatie hebt ingesteld, kunt u elke gewenste technologie gebruiken om met de server te communiceren. Aan de clientzijde kunt u jQuery vervangen door Dojo, Prototype, MooTools of een ander framework dat AJAX-verzoeken ondersteunt. Aan de serverkant heb je de keuze uit ASP.NET, PHP, Django, Ruby on Rails, Perl, JavaServer Pages ... je krijgt het idee. Deze scheiding van punten maakt Knockout.js tot een ongelooflijk flexibel hulpprogramma voor de ontwikkeling van gebruikersinterfaces.

Deze les vertegenwoordigt een hoofdstuk van Knockout bondig, een gratis eBoek van het team van Syncfusion.

Code

Toegang tot externe gegevens

Een nieuw HTML-formulier

Voornaam: Achternaam: Je favoriete eten: Laad gegevens

Samenvatting

Voornaam:

Achternaam:

Je favoriete eten: Laad gegevens