Accéder aux données externes

Pour la plupart des applications Web, la collecte des entrées de l'utilisateur est relativement inutile si vous ne pouvez pas transmettre ces données à un serveur. Dans cette leçon, nous allons apprendre à envoyer et recevoir des informations d'un serveur à l'aide de requêtes AJAX. Cela met le modèle dans le modèle de conception Model-View-ViewModel qui sous-tend Knockout.js.

Figure 27: Ajout du modèle dans notre modèle MVVM

N'oubliez pas que Knockout.js est conçu pour être compatible avec toute autre technologie côté client ou côté serveur. Cette série utilise jQuery $ .getJSON () et $ .post (), mais vous êtes libre d’utiliser tout framework JavaScript capable d’envoyer et de recevoir des données JSON. De même, le langage de script côté serveur est entièrement à vous. Au lieu de présenter des exemples de code d'arrière-plan, cette leçon comprend simplement les données JSON attendues par Knockout.js. Générer cette sortie devrait être facile à implémenter dans n'importe quel langage de script moderne.

Un nouveau formulaire HTML

Nous allons utiliser une nouvelle page HTML pour expérimenter l’intégration Knockout.js / AJAX. Étant donné que cette page devra interagir avec un code côté serveur, assurez-vous qu'il est accessible à partir de la racine du document de votre serveur local. Nous allons commencer par quelque chose de similaire à la leçon précédente:

   Données externes       Prénom: 
 Nom de famille: 
  Ta nourriture préférée:  Charger des données

Ceci est une forme de base avec quelques champs afin que nous puissions voir comment envoyer et recevoir des informations du serveur. Notez que nous incluons également la bibliothèque jQuery avant notre coutume

Ensuite, nous allons remplacer complètement notre PersonViewModel. À sa place, nous utiliserons jQuery $ .getJSON () méthode permettant de charger des données initiales à partir du serveur et de laisser le plug-in de mappage générer de manière dynamique des observables. Remplacer la coutume entière

Lorsque notre application est chargée, elle effectue immédiatement une demande AJAX pour les données utilisateur initiales. Votre script côté serveur pour / get-intial-data devrait renvoyer la même chose que l'exemple de sortie JSON de la section Chargement de données de cette leçon. Une fois les données chargées, nous créons un ViewModel via ko.mapping.fromJS (). Cela prend l'objet JavaScript natif généré par le script et transforme chaque propriété en observable. Mis à part les méthodes saveUserData () et loadUserData (), ce ViewModel généré dynamiquement a exactement les mêmes fonctionnalités que PersonViewModel..

À ce stade, nous avons seulement initialisé notre ViewModel avec les données du serveur. Le plug-in de cartographie nous permet également mettre à jour un ViewModel existant de la même manière. Allons-y et ajoutons un explicite loadUserData () méthode retour au ViewModel:

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

Dans l'ancienne version de loadUserData (), nous devions affecter manuellement chaque propriété de données à son observable respectif. Mais maintenant, le cartographie le plug-in fait tout cela pour nous. Notez que le fait de transmettre l’objet de données comme premier argument à ko.mapping.fromJS () entraîne son mettre à jour le ViewModel au lieu de initialisation il.

Le plug-in de mappage concerne uniquement le chargement de données, donc saveUserData () reste inchangé sauf pour le fait qu'il doit être affecté à l'objet viewModel:

 viewModel.saveUserData = function () var data_to_send = userData: ko.toJSON (viewModel); $ .post ("/ save-user-data", data_to_send, function (data) alert ("Vos données ont été postées sur le serveur!"););

Et maintenant, nous devrions revenir à ce que nous avions commencé au début de cette section, à la fois le Charger des données et Enregistrer des données boutons devraient fonctionner, et Knockout.js devrait garder la vue et ViewModel synchronisés.

Bien que n'étant pas un plug-in nécessaire pour tous les projets Knockout.js, le cartographie Le plug-in permet de passer aux objets complexes sans ajouter de ligne de code supplémentaire pour chaque nouvelle propriété ajoutée à votre ViewModel..

Résumé

Dans cette leçon, nous avons appris comment Knockout.js peut communiquer avec un script côté serveur. La plupart des fonctionnalités liées à AJAX proviennent du framework Web jQuery, bien que Knockout.js fournisse une fonction utilitaire soignée permettant de convertir ses observables en propriétés JavaScript natives. Nous avons également discuté du plug-in de mappage, qui fournit un moyen générique de convertir un objet JavaScript natif en un ViewModel avec des propriétés observables..

N'oubliez pas que Knockout.js est une bibliothèque purement côté client. C'est uniquement pour connecter des objets JavaScript (ViewModels) avec des éléments HTML. Une fois que vous avez établi cette relation, vous pouvez utiliser toute autre technologie que vous souhaitez pour communiquer avec le serveur. Côté client, vous pouvez remplacer jQuery par Dojo, Prototype, MooTools ou tout autre framework prenant en charge les requêtes AJAX. Côté serveur, vous avez le choix entre ASP.NET, PHP, Django, Ruby on Rails, Perl, JavaServer Pages… vous avez l’idée. Cette séparation des préoccupations fait de Knockout.js un outil de développement d'interface utilisateur incroyablement flexible.

Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.

Code

Accéder aux données externes

Un nouveau formulaire HTML

Prénom: Nom de famille: Ta nourriture préférée: Charger des données

Résumé

Prénom:

Nom de famille:

Ta nourriture préférée: Charger des données