Construire un gestionnaire de contacts en utilisant Backbone.js Partie 5

Bienvenue à la Construire un visualiseur de contenu avec Backbone séries. Au cours des quatre premières parties, nous avons examiné la quasi-totalité des composants principaux livrés avec la dernière version de Backbone, notamment les modèles, les contrôleurs, les vues et les routeurs..

Dans cette partie du didacticiel, nous allons connecter notre application à un serveur Web afin de pouvoir stocker nos contacts dans une base de données. Nous ne regarderons pas LocalStorage; c’est un moyen populaire de conserver les données utilisées par les applications Backbone, mais il existe déjà un certain nombre d’excellents tutoriels sur ce sujet..

Commencer

Nous aurons besoin d’un serveur Web et d’une base de données pour cette partie du didacticiel. J'utilise le VWD de Microsoft comme éditeur, qui est livré avec un serveur Web intégré et fonctionne bien avec le serveur MSSQL. C'est donc ce que nous allons utiliser. En vérité, peu importe la pile avec laquelle vous décidez d'aller.

L'installation et la configuration de l'une ou l'autre de ces technologies (serveur VWD et serveur MSSQL) n'entrent pas dans le cadre de ce didacticiel, mais elles sont relativement simples à effectuer et vous trouverez de nombreux guides de qualité..

Une fois installé, vous souhaiterez configurer une nouvelle base de données contenant une table pour stocker les données. Les colonnes de la table doivent refléter les différentes propriétés utilisées par nos modèles. Il doit donc y avoir une colonne de nom, une colonne d’adresse, etc. peut être rempli avec les données d'exemple que nous avons utilisées tout au long de la série jusqu'à présent.

Une colonne qui devrait apparaître dans notre nouvelle table, mais que nous n’avons pas utilisée dans nos données de test locales est un identifiant, qui devrait être unique pour chaque ligne du tableau. Pour plus de facilité, vous souhaiterez probablement que cette option soit incrémentée automatiquement lorsque les données sont ajoutées à la table..

Synchronisation du backbone

Afin de communiquer avec le serveur, Backbone nous donne la Sync module; C’est le seul module majeur que nous n’ayons pas encore utilisé. Nous comprendrons donc que cela complétera notre connaissance des principes fondamentaux du cadre..

Appeler le sync () méthode aboutit à une requête adressée au serveur; Par défaut, cela suppose que jQuery ou Zepto est utilisé et délègue la demande à celui d’entre eux qu’il souhaite réellement exécuter. Il suppose également qu'une interface RESTful attend sur le back-end. Par conséquent, il utilise par défaut les méthodes HTTP POST, PUT, GET, DELETE. Comme nous l'avons vu, Backbone peut être configuré pour utiliser les méthodes GET et POST de l'ancienne école avec des en-têtes supplémentaires spécifiant l'action souhaitée..

En plus de pouvoir appeler sync () directement, les modèles et les collections disposent également de méthodes pouvant être utilisées pour communiquer avec le serveur; les modèles ont le détruire(), chercher (), parse () et enregistrer() méthodes et collections ont chercher () et parse (). le détruire() chercher () et sync () toutes les méthodes diffèrent de sync () si utilisé avec des modèles ou des collections. le parse () La méthode, appelée automatiquement chaque fois que des données sont renvoyées par le serveur, est par défaut un simple no-op qui renvoie simplement la réponse du serveur, mais peut être remplacée si nous souhaitons pré-traiter la réponse avant de la consommer..

Avertissement de chargement de page

La manière dont les données de modèle sont amorcées dans la page varie en fonction de la technologie dorsale utilisée..

La documentation de base pour le chercher () La méthode (d'une collection) indique que cette méthode ne doit pas être utilisée lors du chargement initial de la page pour demander les modèles requis au serveur. Il est ensuite expliqué dans la section FAQ qu'une page doit avoir les modules requis déjà disponibles pour le chargement de la page afin d'éviter la requête AJAX initiale.

C'est une excellente idée et même si nous n'avons pas explicitement à suivre les conseils, cela rendra notre application un peu plus vivante, et cela ne peut être qu'une bonne chose..

La manière dont les données de modèle sont amorcées dans la page varie en fonction de la technologie dorsale utilisée. Nous allons utiliser .net dans cet exemple, donc un moyen de le faire serait de créer dynamiquement un

La logique réelle dans le code-behind qui effectue la lecture de la base de données et la sérialisation des listes peut varier énormément en fonction de l'implémentation. Elle dépasse un peu le cadre de ce didacticiel. sur la façon dont nous l'obtenons réellement. N'hésitez pas à consulter le fichier de classe dans le téléchargement de code qui l'accompagne pour le moyen le plus rapide et le plus simple, mais certainement pas le meilleur..

 À ce stade, nous devrions pouvoir supprimer le tableau de contacts contenant nos données factices de app.js, lancez la page (via le serveur Web WVD intégré, ou IIS) et voyez exactement la même page, avec à peu près les mêmes fonctionnalités, comme nous l'avons vu à la fin de la partie 4. Yay!
 
 Synchroniser notre application avec le serveur
 Dans cet exemple, j'ai utilisé un fichier ASMX .net 4.0 pour gérer les demandes du serveur frontal. Pour que le back-end voie les données qui lui sont envoyées, nous devons configurer le emulateHTTP et EmulateJSON Propriétés de l'épine dorsale. Ajoutez les lignes de code suivantes directement après la modification de la syntaxe du modèle d’Underscore:
 Backbone.emulateHTTP = true; Backbone.emulateJSON = true;
 Que vous deviez ou non configurer ces propriétés lors de la création réelle d'une application Backbone dépend entièrement de la technologie dorsale avec laquelle vous choisissez de travailler..
 Notre application peut donc modifier les données de plusieurs manières. cela pourrait changer les attributs d'un contact déjà existant, ajouter un tout nouveau contact ou supprimer un contact déjà existant.
 La logique pour faire toutes ces choses sur le front-end existe déjà, mais maintenant qu'un serveur est impliqué, le comportement de la page a déjà changé. Bien que la page soit restituée comme auparavant, si nous essayons de supprimer un contact, Backbone émettra une erreur en se plaignant du fait qu'une URL n'a pas été définie. La raison en est que nous avons utilisé le détruire() méthode dans le supprimer le contact() méthode de notre ContactVue classe.
 Voyons comment restaurer la fonctionnalité de suppression. La première chose à faire est de définir un url attribut pour nos modèles. Ajouter la propriété à la Contact classe qui définit un modèle individuel:
 url: function () return "/ContactManager.asmx/ManageContact?id=" + this.get ("id"); 
 Nous spécifions une fonction comme la valeur du url propriété, qui renvoie l'URL à utiliser pour effectuer les demandes. Dans cet exemple, nous pouvons utiliser un fichier de service Web asmx pour traiter les demandes. Nous ajoutons également le nom de notre méthode Web (GérerContact) et ajoutez le identifiant du modèle en tant que paramètre de chaîne de requête.
 Maintenant, si nous supprimons l'un des contacts lors de l'exécution de la page, une demande POST est adressée au service Web. Un X-HTTP-Method-Override un en-tête est ajouté à la demande, spécifiant que la méthode HTTP prévue était EFFACER. Nous pouvons utiliser cela dans notre logique de service Web pour déterminer l'action à entreprendre sur la base de données..
 Ensuite, nous pouvons mettre à jour le saveEdits () méthode du ContactVue classe pour qu'il avertisse le service Web lorsqu'un contact est modifié; changer la ligne de code qui utilise le ensemble() méthode pour qu'il apparaisse comme ceci:
 this.model.set (formData) .save ();
 Tout ce que nous faisons, c'est enchaîner les enregistrer() méthode à la ensemble() méthode. le enregistrer() délégués de méthode à la sync () méthode qui envoie une requête POST au serveur. Comme avant le identifiant du modèle est envoyé sous forme de chaîne de requête et X-HTTP-Method-Override est utilisé pour spécifier la méthode PUT prévue. Cette fois cependant, le Type de contenu l'en-tête est défini sur application / x-www-form-urlencoded (si nous n'avons pas configuré le EmulateJSON la propriété, il serait application / json) et les données de modèle sont envoyées sous forme de données de formulaire, que nous pouvons utiliser pour apporter les modifications nécessaires.
 Tout ce qui reste à faire sur le front-end est de mettre à jour le ajouter le contact() méthode du DirectoryView classe. Auparavant, dans cette méthode, nous avions une instruction if qui vérifiait le type du modèle ajouté pour voir si le menu de sélection devait être mis à jour. Nous devrions maintenant changer cette instruction if pour qu'elle apparaisse comme suit:
 if (_.indexOf (this.getTypes (), formData.type) === -1) this. $ el.find ("# filtre"). find ("select"). remove (). end () .append (this.createSelect ());  this.collection.create (formData);
 Nous avons coupé le si déclaration pour enlever le autre condition, ce qui rend le code un peu plus ordonné. Nous avons également supprimé le ajouter() méthode et ajouté le créer() méthode à sa place. le créer() La méthode ajoutera automatiquement le nouveau modèle à la collection sans que nous créions manuellement une nouvelle instance de la classe de notre modèle, et elle adressera également une requête au serveur, déléguant à nouveau la tâche. sync ().
 Cette fois le X-HTTP-Method-Override il n'est pas nécessaire de définir l'en-tête, car POST est la méthode que nous utiliserions si la requête était toujours adressée à une interface RESTful. Comme avec le enregistrer() méthode, les données de modèle transmises au créer() la méthode est livrée au serveur sous forme de données de formulaire.
 Comme pour le code côté serveur utilisé au début de cette partie du didacticiel pour amorcer les données de modèle initiales dans notre application, le code utilisé pour traiter et gérer les demandes effectuées par Backbone dépasse le cadre du didacticiel. Nous ne sommes intéressés que par le front-end ici. Comme auparavant, le service Web utilisé pour cette démonstration est inclus dans l'archive de code et est commenté. Par conséquent, vérifiez si vous êtes intéressé. J'ai également inclus une sauvegarde de base de données que vous devriez pouvoir restaurer pour pouvoir utiliser les données de démonstration..
 
 Résumé
 Dans cette partie du didacticiel, nous avons examiné certaines des méthodes que nous pouvons utiliser et qui permettent de déléguer des tâches à Backbone. sync () méthode afin de communiquer avec un back-end pouvant conserver les modifications apportées à l'aide du front-end de l'application.
 Nous avons vu comment Backbone adressait par défaut des demandes RESTful à une URL spécifiée et comment nous pouvions le configurer afin de fonctionner avec des serveurs hérités qui ne fonctionnaient pas selon les principes REST. Nous avons également examiné certaines des méthodes qui délèguent à sync () afin de communiquer avec le serveur. Plus précisément, nous avons couvert la retirer(), enregistrer() et créer() méthodes et regardé ce qui est envoyé au serveur et comment.
 Nous avons également examiné la facilité avec laquelle il est possible de modifier les symboles utilisés par Underscore pour interpoler des données dans un modèle. Ceci conclut maintenant le tutoriel de Contact Manager; Bien qu'il y ait beaucoup d'autres fonctionnalités que nous pourrions ajouter à l'application, nous avons maintenant couvert les bases de ce qu'il faut pour créer une application entièrement fonctionnelle en utilisant l'excellent Backbone.js. Merci d'avoir lu.



		
			
	   
	




Code