Share
Dans la quatrième partie de cette série, nous avons constaté à quel point il est facile d’ajouter et de supprimer des modèles de notre collection et de maintenir la page à jour en phase avec les modifications. Dans cette partie, nous allons examiner la modification des données de modèle existantes..
Nous allons commencer par ajouter un autre bouton simple au modèle, ce qui permettra la modification de ses données:
Au fur et à mesure que nous ajoutons ce bouton à notre modèle existant, nous pouvons également ajouter un tout nouveau modèle pouvant être utilisé pour afficher un formulaire modifiable dans lequel les données du modèle peuvent être modifiées. Il ressemble beaucoup au modèle existant et peut être ajouté à la page après le modèle existant:
Le nouveau modèle consiste principalement en éléments qui exposent les données modifiables. Nous n'avons pas à nous soucier des étiquettes pour les éléments, mais nous utilisons plutôt les données du modèle comme valeurs par défaut de chaque entrée. Notez que nous utilisons un champ de formulaire masqué pour stocker le type attribut du modèle, nous allons l'utiliser pour définir la valeur d'un que nous devons ajouter en utilisant notre script au lieu d'avoir le modèle le rendre.
Nous pouvons ensuite lier certains gestionnaires d’événements aux nouveaux boutons que nous avons ajoutés; mettre à jour le événements objet dans le ContactVue class afin qu'il contienne les nouvelles liaisons suivantes:
"click button.edit": "editContact", "changer le select.type": "addType", "cliquer le bouton.enregistrer": "saveEdits", "cliquer le bouton.cancel": "cancelEdit"
N'oubliez pas d'ajouter la virgule de fin à la fin de la reliure existante! Celles-ci sont très similaires aux liaisons que nous avons utilisées auparavant; chaque paire clé: valeur spécifie simplement un événement à écouter et un sélecteur correspondant à l'élément qui déclenche l'événement en tant que clé et le gestionnaire d'événements à exécuter à la détection de l'événement en tant que valeur.
De la même manière que nous avons stocké une référence à la fonction template sous la propriété template de notre classe ContactView, nous devrions également stocker une référence à la fonction template que nous utiliserons pour basculer le contact en mode édition. Ajouter editTemplate directement après la propriété de modèle:
Accentsconagua
editTemplate: _.template ($ ("# contactEditTemplate"). html ()), Maintenant, nous pouvons ajouter les gestionnaires d’événements eux-mêmes, qui devraient également entrer dans le répertoire. ContactVue classe après l'existant supprimer le contact() méthode. Tout d'abord, nous allons ajouter le Modifier le contact() méthode:
editContact: function () this. $ el.html (this.editTemplate (this.model.toJSON ())); var newOpt = $ ("", html:"Ajouter un nouveau… ", valeur:" addType "), this.select = directory.createSelect (). addClass (" type ") .val (this. $ el.find (" # type "). val ()). append (newOpt ) .insertAfter (this. $ el.find (".nom")); ceci. $ el.find ("input [type = 'hidden']"). remove ();, Nous commençons par rendre notre nouvelle editTemplate que nous avons ajouté à la page en utilisant Underscore modèle() méthode de la même manière que nous avons ajouté chaque contact en utilisant le modèle d'affichage standard.
Afin de faciliter la modification du type de contact, nous pouvons afficher une zone de sélection permettant à l'utilisateur de basculer facilement entre les types existants, mais nous souhaitons également prendre en compte la possibilité que l'utilisateur souhaite ajouter un nouveau type. Pour permettre cela, nous allons créer une option spéciale pour la zone de sélection avec le texte Ajouter un nouveau… et une valeur de addType.
Nous créons ensuite le nouveau élément utilisant le createSelect () méthode de notre vue principale, qui, si vous vous rappelez de la dernière partie de ce didacticiel, renverra un élément contenant un pour chaque type unique de la collection. Nous lui donnons un nom de classe, et pour obtenir le élément pour afficher le type existant du contact en cours de modification, nous lui affectons la valeur du caractère caché nous avons ajouté dans notre modèle. Nous insérons ensuite le nouveau après le pour le nom du contact. Le nouvel élément select est ajouté en tant que propriété de l'instance de vue afin que nous puissions interagir facilement avec celui-ci..
Une fois que nous avons ajouté le élément pour le type de contact, nous pouvons alors supprimer le champ caché afin qu'il n'interfère pas avec la sauvegarde de l'édition, que nous examinerons sous peu.
À ce stade, nous devrions maintenant pouvoir cliquer sur le bouton modifier Cliquez sur l'un de nos contacts et convertissez le contenu de ce contact en un formulaire:
L’une des liaisons d’événement que nous avons ajoutées était celle du changement événement du type zone de sélection, afin que nous puissions ajouter un gestionnaire qui remplace le boîte avec un standard élément:
if (this.select.val () === "addType") this.select.remove (); $ ("", " class ":" type "). insertAfter (this. $ el.find (" .nom ")). focus (); Quand le La valeur de l'élément change, nous vérifions d'abord si sa valeur est addType et si oui, nous supprimons l'élément de la page et créons un nouveau élément pour le remplacer. Nous insérons ensuite le nouvel élément en utilisant jQuery insertAfter () méthode et focus prêt pour la saisie de texte.
Ensuite, nous pouvons ajouter le gestionnaire qui prendra les modifications apportées dans le formulaire de modification et mettra à jour les données du modèle. Ajouter le saveEdits () méthode directement après la Modifier le contact() méthode que nous venons d'ajouter:
saveEdits: function (e) e.preventDefault (); var formData = , prev = this.model.previousAttributes (); $ (e.target) .closest ("form"). find (": input"). add (". photo"). each (function () var = $ (this); formData [el.attr ( "classe")] = el.val ();); if (formData.photo === "") delete formData.photo; this.model.set (formData); this.render (); if (prev.photo === "/img/placeholder.png") delete prev.photo; _.each (contacts, fonction (contact) if (_.isEqual (contact, précédent)) contacts.splice (_. indexOf (contacts, contact), 1, formData);); , Tout d’abord, nous créons un élément vide pour stocker les données saisies dans le formulaire, ainsi qu’une copie du précédentAttributs du modèle qui appartient à la vue avec laquelle nous travaillons. le précédentAttributs La propriété de modèles est un magasin de données que Backbone gère pour nous afin que nous puissions facilement voir en quoi consistaient les données d'attribut précédentes d'un attribut..
Nous obtenons ensuite chaque élément d’entrée du formulaire en utilisant une combinaison de celle de jQuery trouver() méthode et la :contribution filtre, qui nous donne tous les champs de formulaire. Nous ne voulons pas l'annulation ou la sauvegarde éléments cependant, nous les supprimons de la sélection en utilisant jQuery ne pas() méthode.
Une fois que nous avons notre collection de champs, nous les parcourons en utilisant jQuery chaque() méthode et pour chaque élément de la collection, nous ajoutons une nouvelle clé à notre Données de formulaire objet utilisant la classe de l'élément en cours, et une nouvelle valeur utilisant la valeur de l'élément en cours.
Lorsque nous reconvertissons le contact modifiable en contact normal, nous ne voulons pas perdre la photo par défaut si une nouvelle photo n'a pas été choisie. Pour nous assurer de ne pas perdre la photo par défaut, nous pouvons supprimer la photo propriété de notre Données de formulaire objet si sa valeur est vide.
Les modèles de colonne vertébrale ont une méthode de définition qui peut être utilisée pour définir n'importe quel attribut.
Les modèles de colonne vertébrale ont une méthode de définition qui peut être utilisée pour définir n'importe quel attribut. Afin de mettre à jour les données du modèle, nous appelons simplement ensemble() méthode passant dans le Données de formulaire objet que nous avons préparé. Une fois que cela est fait, nous appelons la vue rendre() méthode et notre modèle nouvellement mis à jour sera restitué à la page, avec toutes les informations mises à jour à partir du formulaire.
Comme nous l'avons fait précédemment, nous devons mettre à jour les données stockées dans notre mémoire d'origine. Contacts tableau afin que le filtrage de la vue ne perd pas les modifications que nous avons apportées. Nous procédons de la même manière qu’avant, en vérifiant d’abord si le photo propriété a la valeur par défaut et la supprime si oui, puis en utilisant une combinaison de caractères de soulignement chaque() et isEqaul () méthodes pour trouver l'élément dans le tableau de contacts qui a changé. C’est là que nous utilisons le précédentAttributs que nous avons sauvé plus tôt; nous ne pouvons plus utiliser le modèle actuel car ses attributs viennent d'être mis à jour.
Nous utilisons le JavaScript natif épissure() fonction pour mettre à jour le Contacts tableau. Comme auparavant, nous obtenons l'index de l'élément à mettre à jour à l'aide de Underscore Indice de() méthode comme premier argument épissure() et définir la fonction pour mettre à jour un seul élément en utilisant le deuxième argument. Cette fois, nous fournissons notre Données de formulaire objet comme troisième argument. Quand épissure() reçoit trois arguments (ou plus), le troisième argument est la donnée pour remplacer la donnée qui vient d'être supprimée.
Il nous reste un bouton pour lequel nous devons ajouter un gestionnaire - le bouton Annuler. Cette méthode sera très simple et basculera simplement le contact en mode non-édition, en utilisant les données d'origine du modèle. Ajouter cette méthode après le saveEdits () méthode:
cancelEdit: function () this.render (); ,
C'est tout ce que nous devons faire! Nous avons déjà une méthode qui prend un modèle et l'affiche sous forme de vue sur la page; nous l'appelons donc simplement cette méthode et les données du modèle d'origine seront utilisées pour recréer le contact d'origine. Ceci est utile car, même si quelqu'un modifie les données dans les champs du formulaire lorsque le contact est en mode édition, ces modifications seront perdues lorsque le bouton Annuler sera cliqué..
Dans cette partie du didacticiel, nous avons examiné comment mettre à jour les données d'un modèle existant plutôt que de créer un tout nouveau modèle. Pour ce faire, nous avons essentiellement besoin d'appeler un modèle ensemble() méthode et passer dans les nouveaux attributs que nous souhaitons définir.
Comme pour Backbone, cependant, nous n’avons couvert qu’une petite partie de ce que ces bibliothèques fournissent. Nous pouvons en utiliser beaucoup plus pour la création d’applications complexes en front-end..
Comme nous l'avons vu cependant, nous devons également réfléchir à la manière dont nous pouvons modifier la vue pour permettre au visiteur d'entrer les données qui seront définies en tant que nouveaux attributs. Dans cet exemple, nous avons réussi à créer un autre modèle pour gérer le rendu d'un formulaire pré-rempli avec les données d'attribut existantes que l'utilisateur peut sur-typer pour les modifier..
Au cours de cette série, nous avons examiné toutes les composantes principales de Backbone, y compris les modèles, les collections, les vues, les routeurs et les événements. Nous avons également examiné certaines des méthodes et propriétés fournies par Backbone que nous pouvons utiliser pour interagir avec les différentes constructions afin de produire une application intégrée et fonctionnelle, bien que de base..
Outre l'apprentissage des bases de Backbone, l'un des aspects les plus importants du didacticiel concernait la structure de l'application, avec l'ensemble de notre code organisé de manière logique et cohérente. Les applications écrites dans ce style peuvent être beaucoup plus faciles à reprendre et à maintenir sur le long terme. Une grande partie de nos fonctionnalités étaient gérées par les événements, soit en réponse aux actions du visiteur sous la forme de gestionnaires d'événements d'interface utilisateur, mais certaines étaient également motivées par des modifications de la collection et déclenchées manuellement au moment approprié dans notre code..
.
