Commencez à construire votre blog avec Parse.js Commentaires

Ce que vous allez créer

Cette série de tutoriels touche à sa fin. Si vous avez suivi jusqu'à maintenant, vous avez une bonne connaissance du framework MVC et du fonctionnement de Parse.js. Lors de la dernière session, nous avons implémenté les fonctions delete, logout et single blog. Et dans cette session, nous allons ajouter la zone de commentaire à la page d'affichage unique.

La section des commentaires comportera deux parties: un formulaire de commentaire en haut et une liste de commentaires pour cet article de blog en bas:

Comme vous avez maintenant construit de nombreuses fonctionnalités, je vais accélérer un peu et regrouper le contenu en trois étapes importantes:

Créer le modèle de commentaire.
Mettre à jour le BlogView
Ajouter le formulaire de commentaire.

1. Créer le modèle de commentaire

Étape 1: Classe de commentaires

Le modèle vient toujours en premier. Allons-y et créons une nouvelle classe sur Parse.com.

Cette nouvelle classe de commentaires devrait avoir ces champs:

Aiguille Blog
Chaîne nom de l'auteur
Chaîne email
Chaîne contenu

Le pointeur renvoie à la publication de blog à laquelle il appartient et les trois autres champs stockent des informations essentielles pour ce commentaire. Par souci de ce tutoriel, je ne vais pas demander à l'utilisateur de s'inscrire et de se connecter ici, mais vous pouvez lire la documentation de Parse.js sur la classe User pour plus de détails..

Étape 2: Objet de commentaire

Ensuite, créons le Commentaire modèle dans notre blog.js fichier. Vous remarquerez que cela ressemble beaucoup à la Blog modèle que nous avons créé. La seule différence est que nous ne permettons pas aux utilisateurs de modifier leurs commentaires plus tard. Nous utilisons donc un .ajouter() fonction au lieu de .mettre à jour() une fonction. Encore une fois, n'hésitez pas à le rendre modifiable si vous voulez.

Comment = Parse.Object.extend ('Comment', )

2. Mettre à jour le BlogView

Passons à la vue, puisque nous avons cette section de commentaires dans BlogView, nous pouvons rendre le commentaire dans le BlogView ainsi que. Nous allons simplement mettre cela dans le .rendre() une fonction.

Étape 1: Récupérer des commentaires

Nous devons d’abord récupérer les commentaires du blog actuel:

render: function () var self = this, attributs = this.model.toJSON (), // Une nouvelle requête pour filtrer tous les commentaires de ce blog query = new Parse.Query (Comment) .equalTo ("blog" , this.model) .descending ('createdAt'), // Crée une base de collection sur cette nouvelle requête collection = query.collection (); // Récupère la collection collection.fetch (). Then (function (comments) // Stocke les commentaires en tant qu'objet JSON et l'ajoute à l'attribut attributs self.template (attributs)););

Notez que nous ajoutons .décroissant ('createdAt') à la requête, nous affichons donc toujours le dernier commentaire en haut.

Si on se connecte les attributs Juste avant de le rendre, nous pouvons voir que l'objet serait structuré comme ceci:

ACL: Object, auteur: Object, authorName: "moyi", commentaire: Array [2],… __proto__: Object

Et vous pouvez voir que les commentaires sont stockés sous forme de tableau et prêts à être rendus.

Étape 2: Afficher les commentaires

Maintenant, nous avons des commentaires passés dans notre modèle HTML dans attribut, nous pouvons maintenant parcourir le tableau avec la syntaxe handlebar.js:

 #if comment commentaires
  #chaque commentaire  authorName a déclaré:
 contenu
 
 /chaque 
 /si

Si vous voulez d'abord faire un test, faites de faux commentaires sur Parse.com dans votre base de données et actualisez cette page:

3. Ajouter le formulaire de commentaire

Ensuite, nous pouvons ajouter le formulaire de commentaire.

Étape 1: Ajouter du HTML

Ajoutez cette structure HTML juste au-dessus de la section des commentaires:

 Laissez un commentaire
   prénom  
  Adresse électronique  
  Commentaire

Étape 2: Ajouter un événement pour la soumission de formulaire

Ajoutons maintenant un événement dans BlogView:

événements: 'submit .form-comment': 'submit'

Étape 3: Construisez la fonction submit ()

Et puis construire le soumettre() une fonction. Si vous vous rappelez encore comment nous avons écrit la fonction d'envoi pour WriteBlogView, c'est assez similaire.

Notez juste que cette fois nous devons passer ce modèle comme Blog pour le nouveau commentaire:

submit: function (e) e.preventDefault (); var data = $ (e.target) .serializeArray (), comment = new Comment (); comment.add (blog: this.model, authorName: data [0] .value, email: data [1] .value, content: data [2] .value);

Faites un test, et le nouveau commentaire est sûrement affiché en haut:

Conclusion

Cette session, vous avez construit la fonction de commentaire en trois étapes rapides. J'espère que c'est facile pour vous maintenant et que vous pouvez écrire vous-même la plupart des étapes.

Prochaine session, je vais vous montrer une dernière fonctionnalité: ajouter des catégories au blog. Après cela, je vous laisse là-bas, en tant que développeurs compétents de Parse.js. Restez à l'écoute et laissez-moi toutes les questions et commentaires que vous pourriez avoir.

Code