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:

Create the comment model.

Update the BlogView

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:

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.