Commencez à construire votre blog avec Parse.js Edit

Ce que vous allez créer

Lors de notre dernière session, nous avons créé une vue pour la gestion des articles de blog existants et nous sommes passés à l’idée d’un routeur. Maintenant, il est temps de développer la fonction d'édition.

1. Créer et rendre EditBlogView

Pour construire une fonction d'édition, faisons d'abord un EditBlogView. Encore une fois, cela devrait être très facile pour vous maintenant. Nous avons parcouru un long chemin ensemble.

Étape 1: modèle HTML

Cette partie est très similaire à la AddBlogView modèle. La seule différence réelle est que, comme nous sommes en train de modifier un blog, nous devons transmettre le titre et le contenu existants..

Étape 2: EditBlogView

Et puis le EditBlogView. Encore une fois, cela ressemble beaucoup à AddBlogView. Pour les besoins de ce tutoriel, nous nous concentrons sur la façon de le faire fonctionner en premier. Lors de la prochaine session, nous effectuerons tout le travail de nettoyage et supprimerons le code dupliqué. Supporter avec moi pour l'instant.

EditBlogView = Parse.View.extend (template: Handlebars.compile ($ ('# edit-tpl'). Html ()), événements: 'submit .form-edit': 'submit', submit: fonction ( e) e.preventDefault (); // nous écrirons plus tard la fonction d'envoi, rendons: function () var attributs = this.model.toJSON (); this. $ el.html (this.template (attributs) );)

Cette fois, nous n'allons pas d'abord vérifier et nous assurer que cette partie du code fonctionne. Idéalement, vous l'avez déjà fait suffisamment de fois pour que vous soyez à l'aise pour passer à autre chose. Vérifiez toujours les sessions précédentes ou laissez-moi un commentaire si vous vous sentez bloqué.

2. Lien vers la page / edit avec routeur

Maintenant, assurons-nous /modifier/ établira un lien vers et rendra la vue d'édition correcte.

Étape 1: / edit /: id

La dernière fois, nous avons déjà participé à la préparation. Nous avons le modèle d'URL pour le /modifier page dans BlogRouter.routes:

itinéraires: 'admin': 'admin', 'login': 'login', 'add': 'add', 'edit /: url': 'edit'

Comme vous pouvez le constater, le modèle d’URL pointe déjà vers le BlogRouter.edit () fonction, dans laquelle nous avons une petite fonction d'espace réservé qui prend en entrée le paramètre url:

edit: function (url) 

Cela signifie que si vous visitez http: // localhost / votre-répertoire / edit / tout-ce-que-vous-mettez-ici, le BlogRouter.edit () la fonction sera déclenchée, et la variable url au sein de cette fonction va obtenir la valeur de tout ce que vous mettez ici.

Alors maintenant, quelle est la chose la plus facile à mettre après /modifier cela peut nous aider à trouver le post de blog exact que nous voulons éditer? CA devrait etre identifiant, droite? Modifions un peu le code pour qu'il soit clair que nous allons mettre identifiant Là.

itinéraires: 'admin': 'admin', 'login': 'login', 'add': 'add', 'éditer /: id': 'éditer',… éditer: function (id) 

Étape 2: Obtenez un blog par son identifiant

Maintenant que nous avons le identifiant à partir de l'URL, nous devons trouver ce blog spécifique avec cette identifiant. La façon de faire cela dans Parse.js utilise une requête:

edit: function (id) // Tout d'abord, vous devez définir une nouvelle requête et lui dire quelle table doit être utilisée pour var query = new Parse.Query (Blog); // Si vous recherchez un objet par son identifiant, // passez simplement l'identifiant en tant que premier paramètre dans .get () ., erreur: fonction (blog, erreur) // Si le blog n’a pas été récupéré avec succès.); 

Si vous voulez en savoir plus sur les requêtes Parse, consultez leur documentation..

Étape 3: Rendez editBlogView

Continuons pour finir le Succès et Erreur fonctions dans le rappel de requête.

Pour le Succès fonction, nous voulons rendre un editBlogView en utilisant cet article de blog comme modèle:

success: function (blog) var editBlogView = new EditBlogView (modèle: blog); editBlogView.render (); $ ('. main-container'). html (editBlogView.el); 

Et pour le Erreur fonction, enregistrons simplement l'erreur comme d'habitude:

erreur: fonction (blog, erreur) console.log (erreur); 

Étape 4: Lien vers / modifier la page

Passons à autre chose, mettons à jour les liens d'édition dans # blogs-admin-tpl alors ils sont liés à /modifier pages. Donnons-lui également une classe unique car nous y ferons référence:

Modifier |

Et pour être sûr que le routeur obtiendra le changement d'URL (car ce n'est pas encore statique), écrivons notre propre fonction de lien pour remplacer celle par défaut. BlogAdminView.

Tout d'abord, ajoutez un événement pour cliquer .App-edit. C'est pourquoi nous avions besoin d'un cours avant!

événements: 'cliquez sur .app-edit': 'edit'

Puis dans le modifier() fonction, empêche l'action par défaut, obtient la valeur href et utilise blogRouter.navigate () pour le déclencher.

edit: function (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter.navigate (href, trigger: true); 

Maintenant nous pouvons le tester:

Les tests pourraient être un peu difficiles à ce stade, car le routeur n’est pas encore complètement configuré. Allez simplement à http: //localhost/votre-directory/admin.html comme point de départ à chaque actualisation. Nous nous en occuperons lors de la prochaine session.

3. Soumettre un blog Modifier

Nous sommes si près de faire fonctionner cette page. Nous avons juste besoin de faire la EditBlogView.submit () fonction de travail.

Étape 1: Blog.update () 

Tout comme nous avons créé le Blog.create () fonction pour l'ajout d'un nouveau blog, nous devons maintenant créer un Blog.update () fonction pour sauvegarder nos modifications.

update: function (titre, contenu) this.set ('title': titre, 'content': contenu). save (null, succès: function (blog) alert ('Votre blog' + blog.get ('title') + 'a été enregistré!');, erreur: fonction (blog, erreur) console.log (blog); console.log (erreur);); 

Comme vous pouvez le voir, cela ressemble beaucoup au .créer() fonction, mais au lieu de créer et d'enregistrer un nouveau blog, vous définissez d'abord la valeur de l'objet actuel, puis vous l'enregistrez.

Étape 2: EditBlogView.submit ()

Maintenant, obtenons les données du formulaire dans EditBlogView et appelez le .soumettre() fonction sur le modèle (qui fait référence à la publication de blog actuelle dans la vue d'édition). Encore une fois, très semblable à celui de AddBlogView:

submit: function (e) e.preventDefault (); var data = $ (e.target) .serializeArray (); this.model.update (data [0] .value, $ ('textarea'). val ()); 

Essayez, et ça devrait marcher!

Si vous avez suivi le tutoriel à ce stade, bravo.

4. Bonus: URL lisible

Si vous n'aimez pas voir l'identifiant dans l'URL, et voulez qu'il soit comme / edit / titre de votre blog /, vous pouvez le faire assez facilement, aussi.

Il suffit d'ajouter un nouveau champ url à vos articles de blog, et l'ajouter dans le .créer() une fonction:

'url': title.toLowerCase () .replace (/ [^ \ w] + / g, ") .replace (/ + / g, '-')

Et en BlogRouter.edit (), interroger les articles de blog par leur url valeur:

query.equalTo ("url", url) .find (). then (function (blogs) // Cette requête renverra tous les blogs qualifiants d'un tableau // Il suffit donc d'obtenir le premier // Si vous voulez apprendre de plus, consultez la documentation de Parse.js var blog = blogs [0];…);

Je ne donnerai pas tout le code ici, parce que je pense que vous pouvez le reconstituer maintenant!

Conclusion

Maintenant, tout devrait venir ensemble pour vous. Vous avez fait une tonne de progrès jusqu'à présent. Au cours de cette session, nous avons créé toute la fonctionnalité d'édition du blog: de la préparation de la page à la configuration du routeur, puis à la mise à jour de la base de données..

La prochaine fois, nous ferons un grand nettoyage dans notre base de code. Maintenant, nous avons beaucoup de codes qui se chevauchent ici et là, parce que nous voulons simplement nous assurer que nous pouvons créer les fonctions pour fonctionner. La prochaine fois, vous fusionnerez index.html et admin.html, .créer() et .mettre à jour(), AddBlogView et EditBlogView. Vous apprendrez également à construire une structure d’application solide avec Parse.js. 

Quoi d'autre? Nous reverrons également le routeur afin que les URL puissent être statiques (ce qui signifie que vous pouvez le mettre en signet, actualiser la page ou l'envoyer à votre ami). Beaucoup de bonnes choses à venir, alors restez à l'écoute!