Commencez à construire votre blog avec Parse.js supprimer, fermer la session et afficher un seul blog

Ce que vous allez créer

Lors de la dernière session, vous avez restructuré l'ensemble de votre système de blog. Maintenant que tout est nettoyé, vous êtes prêt à vous lancer dans de nouvelles aventures. Au cours de cette session, nous allons en faire plus autour du routeur et ajouter trois fonctions supplémentaires à notre système de blogs: supprimer, fermer la session et afficher un seul blog..

1. Supprimer

Dans la partie 6, nous avons couvert la fonction d'édition. Il est fort probable que vous souhaitiez également supprimer l'un de vos messages de blog. Vous pouvez mettre cette fonction à deux endroits: ajoutez-la dans le BlogsAdminView, ou envoyez-le à une URL et traitez-le dans le Routeur.

Je vais vous montrer le chemin du routeur. Il est plus couramment utilisé et rend le code mieux structuré..

Étape 1: Ajouter un modèle d'URL

Comme d'habitude, ajoutons d'abord un modèle d'URL:

 itinéraires: ": 'index', 'admin': 'admin', 'login': 'login', 'add': 'add', 'éditer /: id': 'éditer', 'del /: id' : 'del'

Étape 2: Lien pour supprimer

Ensuite, mettez à jour le lien dans la page d'administration:

 Effacer

Étape 3: del Fonction

Ajoutons maintenant un nouveau del fonction au routeur pour le gérer. C'est assez simple: trouver le blog en utilisant le identifiant nous avons transmis l'URL et le détruisons.

Essayez de vous mettre au défi et écrivez-le sans lire mon code. Vous devriez vraiment bien comprendre Parse.js à ce stade.

 del: function (id) var query = new Parse.Query (Blog); query.get (id) .then (fonction (blog) blog.destroy (). then (fonction (blog) alert ('Supprimé!');));

Notez que vous pouvez utiliser le .puis() fonctionne ici au lieu de passer un objet comme nous l'avons fait précédemment:

 query.get (id, succès: fonction (blog) …, erreur: fonction (blog, erreur) …);

C'est un moyen facile d'ajouter des fonctions de rappel dans Parse.js, ce qui rend votre code plus propre et plus lisible. Allez sur Parse.com pour voir la documentation complète sur les promesses.

Essayons-le et revérifions la base de données pour voir si elle fonctionne..

Bravo, ça marche!

Étape 4: redirection vers la page d'administration

Si vous prêtez attention à l’URL, vous verrez qu’une fois que vous avez cliqué hors du champ d’alerte, l’URL reste / del / et le message que vous venez de supprimer est toujours là. Nous souhaitons renvoyer les utilisateurs à la page d'administration après la suppression. Cette page doit être actualisée et refléter les modifications apportées..

Vous pouvez réaliser tout cela en faisant une redirection:

 del: function (id) var self = this, requête = new Parse.Query (Blog); query.get (id) .then (fonction (blog) blog.destroy (). then (fonction (blog) self.navigate ('admin', trigger: true);));

Notez que parce que cette fois vous appelez naviguer depuis le routeur, vous pouvez simplement stocker le routeur soi, et appeler self.navigate ().

Étape 5: Vérifier la connexion

Enfin, nous devons nous assurer que vous êtes le seul à pouvoir supprimer vos articles de blog. Vérifions la connexion pour la fonction. Cela devrait être le même que le modifier une fonction.

 del: function (id) if (! Parse.User.current ()) this.navigate ('# / login', trigger: true);  autre …

2. Déconnexion

Comme pour la suppression, la déconnexion peut également être gérée par le routeur. Et cela commence aussi par l'ajout du motif d'URL:

 itinéraires: … 'déconnexion': 'déconnexion',

La fonction de déconnexion est très simple dans Parse.js. Il suffit d'appeler Parse.User.logOut () puis redirigez vers le /s'identifier page:

 déconnexion: function () Parse.User.logOut (); this.navigate ('# / login', trigger: true);

Et enfin, ajoutons un bouton à # admin-tpl:

 Connectez - Out

Comme vous pouvez le constater, le style n’est pas au cœur de ce didacticiel. N'hésitez pas à fixer le rembourrage et à le coiffer comme vous le souhaitez.

3. Single Blog View

Passons maintenant à la création de nouvelles fonctionnalités.

Jusqu'à présent, nous affichons l'intégralité de l'article du blog sur la page d'accueil. Bien que certaines personnes préfèrent ce style, la plupart des systèmes de blogs acceptent l'idée de disposer d'un résumé des extraits de code. Si les visiteurs cliquent sur les articles, ils peuvent voir le contenu sur une page distincte, avec éventuellement une zone de commentaire..

Je vais vous guider dans la création de cette vue détaillée de blog unique dans cette session, et nous nous concentrerons sur la construction de commentaires dans la prochaine..

Étape 1: Ajouter une colonne de résumé

Premièrement, ajoutons une colonne pour le résumé dans la table Blog:

Étape 2: Inclure le résumé dans WriteBlogView

Maintenant, ajoutons-le à la Blog.update () une fonction. Vous pouvez modifier la fonction pour prendre un objet de données contenant le titre, le résumé et le contenu, afin d'éviter de mémoriser l'ordre des variables..

 update: function (data) // Ne configurez ACL que si le blog ne l'a pas… this.set ('title': data.title, 'summary': data.summary, 'content': data.content, …). Save (null, …);

Ajouter un de plus </code> pour résumé dans <code># write-tpl</code>:</p> <pre> // Met ce groupe de formulaires entre les groupes de titres pour le titre et le contenu <div> <label for="summary">Résumé</label> <textarea name="summary" rows="3">résumé

  Et changer le WriteBlogView.submit () fonctionner en conséquence:
  submit: function (e) … this.model.update (title: data [0] .value, summary: data [1] .value, content: data [2] .value);  
 Maintenant, depuis que nous avons ajouté une nouvelle variable dans le modèle, nous devons lui donner une valeur vide par défaut dans WriteBlogView.render () une fonction:
  render: function () … if (this.model) … else attributs = formulaire_titre: 'Ajouter un blog', titre: ", résumé:", contenu: " ... 
 Et si vous utilisez le plugin wysihtml5 pour le contenu, vous remarquerez précédemment que nous visons tous les </code> éléments:</p> <pre>this. $ el.html (this.template (attributs)). find ('textarea'). wysihtml5 (); </pre> <p>Donnons au contenu textarea une classe et ciblons uniquement celui avec le plugin wysihtml5.</p> <p>Dans <code># write-tpl</code>:</p> <pre> <textarea name="content" rows="20">contenu  
dans le WriteBlogView.render () une fonction:
 this. $ el.html (this.template (attributs)). find ('. write-content'). wysihtml5 (); 
 Maintenant ça marche!
    Étape 3: Afficher le résumé sur la page d'accueil
 Jouez avec la nouvelle page d'écriture de blog et ajoutez des articles de blog avec résumé, puis extrayez le résumé à la place du contenu # blogs-tpl:
  #each blog  Titre
 À time by authorName
 résumé
 
 /chaque 
 Étape 4: Ajouter la page SingleBlogView
 Prenez une minute et réfléchissez à la manière dont vous ajouteriez un / blog /: id page pour afficher le contenu de chaque article de blog et essayer de le faire vous-même. Vous devriez pouvoir tout faire par vous-même maintenant!
 Mais pour les besoins de ce tutoriel, laissez-moi vous donner un aperçu rapide:
 Ajouter un nouveau modèle HTML pour cette page:
   
 Ajouter un nouveau BlogView classe qui prend dans un Blog objet, et le rendre en # blog-tpl:
  BlogView = Parse.View.extend (template: Handlebars.compile ($ ('# blog-tpl'). Html ()), restitue: function () var attributs = this.model.toJSON (); this. $ el.html (this.template (attributs));), 
 Ajouter un nouveau modèle d'URL dans BlogRouter:
  itinéraires: … 'blog /: id': 'blog',… 
 Et dans le BlogRouter.blog () fonction, obtenir un blog par son identifiant, rendre un blogView, et le mettre dans $ conteneur:
  blog: function (id) var query = new Parse.Query (Blog); query.get (id, succès: fonction (blog) console.log (blog); var blogView = nouveau BlogView (modèle: blog); blogView.render (); $ conteneur.html (blogView.el); , erreur: fonction (blog, erreur) console.log (erreur););  
 Enfin, mettez à jour le lien dans # blogs-tpl faire un lien vers cette page:
  #each blog  Titre
 À time by authorName
 résumé
 
 /chaque 
 Essaie:
    Des points supplémentaires si vous l'avez fait vous-même.
 Conclusion
 Dans cette session, vous avez beaucoup construit: une fonction de suppression, une fonction de déconnexion et un autre nouveau type de page. Si vous avez suivi cette série de didacticiels jusqu'à présent, je pense que vous comprenez parfaitement comment la base de données, le modèle, la vue, le modèle et le routeur fonctionnent ensemble. J'espère que vous commencez également à aimer construire un projet Parse.js à ce stade. Laissez-moi vos commentaires et laissez-moi savoir si c'est utile.
 Avec cette seule page de blog que nous avons créée cette fois, nous allons ajouter une section de commentaires la prochaine fois. Ça devrait être amusant. Restez à l'écoute!



		
			
	   
	




Code