Aprenda a Criar um Blog Usando Parse.js: Comentários

Essa série está chegando ao fim. Se acompanhou até agora, é provável que tenha um bom entendimento do padrão MVC e como o Parse.js funciona. No artigo anterior, implementamos o deletar, sair e visão de blog único. E nessa seção, adicionaremos a área de comentários à visão de blog único.

A seção de comentário terá duas partes: um formulário de comentário no topo e uma lista de comentários daquele publicação em baixo:

Como já construímos vários recurso, aceleremos um pouco e agruparemos o conteúdo três grandes passos:

1. Criar o modelo de comentário
2. Atualizar BlogView
3. Adicionar o formulário de comentário

1. Criando Modelo de Comentário

Passo 1: Classe Comment

O modelo sempre vem antes. Então, criemos uma nova classe no Parse.com.

Essa nova classe Comment deve ter esses campos:

• Pointer blog
• String authorName
• String email
• String content

O ponteiro vincula à publicação a que pertence e os outros campos guardam informações chaves para o comentário. Para esse tutorial, não faremos o usuário registrar-se e acessar a conta, mas podemos ler mais na documentação do Parse.js sobre a classe User para mais detalhes.

Passo 2: Objeto Comment

Agora, criaremos o modelo Comment no arquivo blog.js. Percebamos que é muito parecido ao modelo Blog que criamos. A única diferença é que não permitimos os usuários editarem os comentários depois, assim, atribuimos .add() ao invés de .update() . Porém, podemos torná-los editáveis se quisermos.

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

2. Atualizar BlogView

Indo para a visão, como temos essa seção de comentário em BlogView, podemos renderizar o comentário lá também. Apenas colocaremos em .render() .

Passo 1: Buscar Comentários

Primeiro, precisamos buscar os comentários do blog atual:

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

Adicionamos .descending('createdAt') à consulta para sempre mostrarmos o comentário mais atual no topo.

Se registramos attributes antes de renderizá-los, veremos que o objeto é estruturado assim:

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

E podemos ver que os comentários são guardados como vetor e prontos para serem renderizados.

Passo 2: Mostrando Comentários

Agora temos os comentários no modelo HTML via attribute, podemos iterar pelo vetor com a sintaxe do handlebar.js:

<!-- 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}}

Se quisermos testar primeiro, criemos alguns comentários direto no Parse.com e atualizemos a página:

3. Adicionando o Formulário de Comentário

Então, podemos continuar e adicionar o formulário de comentário.

Passo 1: Adicionar o HTML

Adicionemos o HTML logo acima da seção dos comentários:

<!-- 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>

Passo 2: Adicionar Evento para a Submissão do Formulário

Agora, adicionemos um evento em BlogView:

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

Passo 3: Contruir a Função submit()

Contruamos a função submit(). Se ainda lembramos como criamos a função submit para WriteBlogView, será bem parecido.

Notemos que, desa vez, precisamos passar this.model como blog para o novo comentário.

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

Testemos e é certo que o novo comentário aparecerá no topo:

Conclusão

Nesse artigo, construimos uma função de comentar em três passos rápidos. Esperamos que tenha sido fácil e que tenha criado a maior parte das coisas sozinho.

No próximo, mostraremos um último recurso: adicionar categorias ao blog. Após isso, vocês já serão desenvolvedores capazes do Parse.js. Fiquem de olho e deixem suas perguntas e comentários, se tiverem.