Get Started Building Your Blog With Parse.js: Comments

This tutorial series is coming to an end. If you’ve followed along until now, hopefully you have a solid understanding of the MVC framework, and how Parse.js works. Last session, we implemented delete, logout, and single blog view. And in this session, we are going to add the commenting area to the single page view.

The comment section is going to have two parts: a comment form on the top, and a list of comments to that blog post at the bottom:

Because you now have built so many features, I am going to speed up a little bit, and group the content into three big steps:

1. Create the comment model.


2. Update the BlogView


3. Add the comment form.

1. Create the Comment Model

Step 1: Comment Class

The model always comes first. Let’s go ahead and create a new class on Parse.com.

This new comment class should have these fields:

• Pointer blog
  


• String authorName
  


• String email
  


• String content
  

The pointer points back to the blog post it belongs to, and the other three fields store key information for that comment. For the sake of this tutorial, I’m not going to have the user sign up and log in here, but you can read the Parse.js documentation on the User class for more details.

Step 2: Comment Object

Next, let’s create the Comment model in our blog.js file. You will notice that it’s very similar to the Blog model we created. The only difference is that we are not allowing users to edit their comments later, so we are using an .add() function instead of the .update() function. Again, feel free to make it editable if you want.

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

2. Update the BlogView

Moving on to the view, since we have this comment section in BlogView, we can render the comment in the BlogView as well. We will just put that in the .render() function.

Step 1: Fetch Comments

First we need to fetch the comments of the current blog:

render: function() { 
var self = this,
attributes = this.model.toJSON(),
// A new query to filter out all the comment in this blog
query = new Parse.Query(Comment).equalTo("blog", this.model).descending('createdAt'),
// Create a collection base on that new query
collection = query.collection();
// Fetch the collection
collection.fetch().then(function(comments) {
// Store the comments as a JSON object and add it into attributes object
attributes.comment = comments.toJSON();
self.$el.html(self.template(attributes));
});
}

Notice that we add .descending('createdAt') to the query so we always display the latest comment at the top.

If we log attributes right before we render it, we can see the object would be structured like this:

{
ACL: Object,
author: Object,
authorName: "moyi",
comment: Array[2],
...
__proto__: Object
}

And you can see that comments are stored as an array, and ready to be rendered.

Step 2: Display Comments

Now we have comments passed into our HTML template within attribute, we can now loop through the array with handlebar.js syntax:

<!-- Comments -->
{{#if comment}}
<h2>Comments</h2>
<ul class="blog-comments list-unstyled">
{{#each comment}}
<li class="blog-comment">
<div><a href="mailto:{{email}}">{{authorName}}</a> said:</div>
<div>{{content}}</div>
</li>   
{{/each}}
</ul>
{{/if}}

If you want to give it a test first, make a few fake comments on Parse.com in your database and refresh this page:

3. Add the Comment Form

Then, we can move on to adding the comment form.

Step 1: Add HTML

Add this HTML structure right above the comments section:

<!-- Comment Form -->
<h2>Leave a Comment</h2>
<form class="form-comment" role="form">
<div class="form-group">
<label for="comment-author-name">Name</label>
<input name="authorName" type="text" class="form-control" id="comment-author-name" placeholder="Your name">
</div>
<div class="form-group">
<label for="comment-email">Email address</label>
<input name="email" type="email" class="form-control" id="comment-email" placeholder="Your email">
</div>
<div class="form-group">
<label for="comment-content">Comment</label>
<textarea name="content" class="form-control" rows="3" id="comment-content"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Step 2: Add an Event for Form Submission

Now let’s add an event in BlogView:

events: {
'submit .form-comment': 'submit'
}

Step 3: Build Out the submit() Function

And then build out the submit() function. If you still remember how we wrote the submit function for WriteBlogView, this is pretty similar.

Just notice this time we need to pass in this.model as blog for the new comment:

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
});
}

Give it a test, and surely the new comment is now displaying at the top:

Conclusion

This session, you built out the comment function in three quick steps. Hopefully it’s easy for you now, and you can write most of the steps by yourself.

Next session, I’m going to show you one last feature: adding categories to the blog. After that, I will leave you there, as capable Parse.js developers. Stay tuned and leave me all the questions and feedback you may have.