How to Get Started Building Your Blog With Parse.js: Comments

View: 458    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

18 point/4 review File has been tested

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.

Introduction

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.

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.

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', {
})

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.

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.

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:

Test Comment

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

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>

Now let’s add an event in BlogView:

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

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

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.

 

How to Get Started Building Your Blog With Parse.js: Comments

How to Get Started Building Your Blog With Parse.js: Comments Posted on 08-01-2016  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. 4.5/10 458

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 633    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 736    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 340    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 406    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 364    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    3/3 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 346    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 5116    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 821    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    4.5/1 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd