Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Get Started Building Your Blog With Parse.js: Comments
  • like 5 07

    Get Started Building Your Blog With Parse.js: Comments

    1. January 2016
    2. Daily
    3. read 805

    Final product image
    What You'll Be Creating

    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:

    outcome

    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:{}">{{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:

    Test Comment

    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:

    New Comment

    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.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    5
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2025 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News