Share
C’est la dernière partie d’un didacticiel en trois parties qui vous apprendra comment créer une application de gestion des contacts en JavaScript, à l’aide de CanJS et de jQuery. Lorsque vous aurez terminé ce didacticiel, vous aurez tout ce dont vous avez besoin pour créer vos propres applications JavaScript à l'aide de CanJS.!
Dans la deuxième partie, vous avez créé les vues et les contrôles nécessaires pour afficher les catégories, créé des aides Model.List, utilisé le routage pour filtrer les contacts et modifié votre EJS pour tirer parti de la liaison dynamique..
Dans cette partie du tutoriel, vous allez:
Accentsconagua
Contact ContrôleVous ajouterez aux fichiers sources des première et deuxième parties, donc si vous ne l’avez pas déjà fait, rattrapez-vous en lisant les première et deuxième parties..
Dans la première partie, contactView.ejs placé chaque propriété d'un contact est dans une balise d'entrée. Pour mettre à jour un contact lorsque ces entrées changent, vous devez ajouter des gestionnaires d’événements à la liste. Contact Contrôle. Ajouter ce code contacts.js à l'intérieur de Contacts Contrôle:
'.contact entrée focusout': fonction (el, ev) this.updateContact (el); , '.contact input keyup': fonction (el, ev) if (ev.keyCode == 13) el.trigger ('blur'), '.contact select change': fonction (el, ev) this.updateContact (el), updateContact: function (el) var contact = el.closest ('. contact'). data ('contact'); contact.attr (el.attr ('nom'), el.val ()). save (); Passons en revue ce code ligne par ligne et voyons comment cela fonctionne:
'.contact entrée focusout': fonction (el, ev) this.updateContact (el); ,
Appels updateContact () quand tout perd le focus.
'.contact input keyup': function (el, ev) if (ev.keyCode == 13) el.trigger ('blur') Déclenche le brouiller événement sur un si la touche entrée est enfoncée pendant la mise au point. Cela fera perdre la focalisation à l’entrée, qui est gérée par le focusout gestionnaire d'événements.
'.contact select change': fonction (el, ev) this.updateContact (el),
Appels updateContact () quand la valeur de la changements.
var contact = el.closest ('. contact'). data ('contact'); Trouve le plus proche balise parent et récupère l'instance de modèle à l'aide de $ .data ().
contact.attr (el.attr ('nom'), el.val ()). save (); Met à jour le contact en utilisant attr (). Le nom de chacun correspond à une propriété de contact, donc el.attr ('nom') renverra le nom de la propriété en cours de mise à jour. enregistrer() est utilisé pour enregistrer la modification dans le Contact Modèle.
Il existe un petit lien avec un «X» dans le coin supérieur droit de chaque contact. Lorsque vous cliquez dessus, le contact doit être supprimé. Pour ce faire, ajoutez un autre gestionnaire d’événements au Contacts contrôle qui ressemble à ceci:
'.remove click': fonction (el, ev) el.closest ('. contact'). data ('contact'). destroy (); Quand le X est cliqué, l'instance de contact est extraite du plus proche et détruire() est appelé. détruire() supprime le contact du modèle et le supprime de tout modèle.Listes.
Live binding mettra automatiquement à jour votre interface utilisateur lorsqu'un contact est supprimé.
Vous allez maintenant créer le contrôle et la vue nécessaires à la création d'un contact. D'abord, vous aurez besoin d'un bouton géant "Nouveau contact". Ajouter ce code à Vous devrez également créer une nouvelle vue qui rendra un formulaire pour créer un contact. Enregistrez ce code sous Cette vue rend le Vous devez maintenant créer un nouveau contrôle nommé Passons en revue ce contrôle en détail pour voir ce qui se passe: Crée un contact vide en utilisant Glisse le formulaire hors de vue. Appels Appel Appels Trouve le Si le nom du contact n'est pas vide, Les contrôles prennent également en charge des gestionnaires d’événements basés sur un modèle qui vous permettent de personnaliser un gestionnaire d’événement et d’écouter des événements sur des objets autres que Vous personnalisez le comportement du gestionnaire à l'aide de Les contrôles peuvent également être liés à des objets autres que Ces gestionnaires seront nettoyés lorsque l'instance de contrôle sera détruite. Ceci est essentiel pour éviter les fuites de mémoire courantes dans les applications JavaScript.. Vous devez utiliser un gestionnaire d'événements basé sur un modèle pour afficher le formulaire lorsque vous cliquez sur le bouton "Nouveau contact". Ajouter ce gestionnaire d'événements au Le bouton "Nouveau contact" est en dehors de la Tout comme les autres contrôles de votre application, vous devez créer une nouvelle instance du Avec ce changement, une instance du Lorsqu'un nouveau contact est créé, le Cela lie à la Live binding mettra automatiquement à jour l'interface utilisateur de vos applications lorsque le contact sera ajouté à C'est tout pour la dernière partie de ce tutoriel. Dans la troisième partie, vous: C'est la fin du didacticiel du gestionnaire de contacts CanJS. Voici un résumé de ce qui a été couvert dans ce didacticiel en trois parties: Vous avez maintenant tout ce dont vous avez besoin pour créer des applications JavaScript avec CanJS. Allez construire quelque chose de génial. Pour une documentation complète et d'autres exemples d'applications, visitez le site CanJS. Merci d'avoir lu!index.html juste au dessus Nouveau contact
createView.ejs dans votre dossier de vues:
contactView.ejs sous-modèle et ajoute les boutons "Enregistrer" et "Annuler". Voici à quoi cela ressemble dans l'application: Créer qui affichera le formulaire et enregistrera le nouveau contact au Contact Modèle. Ajouter ce code à contacts.js: Create = can.Control (show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', view: this.contact, catégories: this .options.categories)); this.element.slideDown (200);, masquer: function () this.element.slideUp (200);, '.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);, '.save clic': fonction (el) this.createContact (el), '.cancel clic': fonction () ceci .hide ();, createContact: function () var form = this.element.find ('form'); valeurs = can.deparam (form.serialize ()); if (nom.valeurs! == "" ) this.contact.attr (valeurs) .save (); this.hide ();); show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, catégories: this.options.categories)); this.element.slideDown (200); , nouveau contact() et l'assigne à this.contact. Le nouveau contact est passé à peut voir() ainsi que les catégories à rendre. masquer: function () this.element.slideUp (200); ,
'.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);
Créer un contact() si la touche entrée est enfoncée pendant l'une des entrées. '.save click': function (el) this.createContact (el),
Créer un contact() lorsque le bouton "Enregistrer" est cliqué. 'Cliquez sur .cancel': function () this.hide (); ,
cacher() quand le bouton "Annuler" est cliqué. var form = this.element.find ('form'); valeurs = can.deparam (form.serialize ()); élément et utilise jQuery sérialiser () fonction pour obtenir une chaîne représentant toutes les valeurs du formulaire. Ensuite, la chaîne sérialisée est convertie en un objet en utilisant can.deparam (). if (valeurs.nom! == "") this.contact.attr (valeurs) .save (); this.hide ();
attr () est utilisé pour mettre à jour le contact stocké dans this.contact. enregistrer() est appelé pour enregistrer les modifications apportées au modèle et le formulaire est masqué en appelant cacher().
Utilisation de gestionnaires d'événements basés sur un modèle
this.element.PRÉNOM dans le gestionnaire d'événements. La variable à l'intérieur des accolades est levée sur le contrôle this.options d'abord, puis le la fenêtre. Vous pouvez créer plusieurs instances du même contrôle mais personnaliser le comportement de ses gestionnaires d'événements dans chaque instance..this.element en utilisant des gestionnaires d'événements basés sur des modèles. Si la variable à l'intérieur PRÉNOM est un objet, Control se liera à cet objet pour écouter les événements. L'objet ne doit pas nécessairement être un élément DOM, il peut s'agir de tout objet comme un modèle. Pour écouter un clic n'importe où sur une page, vous utiliseriez: 'document click'. en tant que votre gestionnaire d'événements.
Montrer le formulaire
Créer Contrôle en contacts.js: 'document # nouveau contact contact': function () this.show ();
Créer Élément de contrôle, donc 'document # new-contact' est utilisé comme sélecteur pour le bouton. Quand il est cliqué, le formulaire va glisser dans la vue.
Initialiser le contrôle de création
Créer Contrôle. Mettez à jour votre fonction de préparation de document dans contacts.js ressembler à ceci: $ (document) .ready (fonction () $ .when (Category.findAll (), Contact.findAll ())). then (fonction (categoryResponse, contactResponse) var catégories = categoryResponse [0], contacts = contactResponse [0 ]; nouveau Créer ('# créer', catégories: catégories); nouveaux contacts ('# contacts', contacts: contacts, catégories: catégories); nouveau filtre ('# filtre', contacts: contacts, catégories : catégories););) Créer Le contrôle sera créé sur le #créer élément. Il sera passé la liste des catégories.
Réagir à un nouveau contact
Model.List stocké dans le Contacts Le contrôle doit être mis à jour. Pour ce faire, vous utilisez des gestionnaires d’événements basés sur un modèle. Ajouter ce gestionnaire d'événements au Contacts Contrôle en contacts.js: 'Contact created': fonction (liste, ev, contact) this.options.contacts.push (contact);
créé événement du Contact Modèle. Le nouveau contact est ajouté à la Model.List stocké dans le Contacts Contrôle en utilisant pousser().
this.options.contacts.Emballer
