Aprenda a Criar um Blog Usando Parse.js: Comentários
Portuguese (Português) translation by Erick Patrick (you can also view the original English article)



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:
- Criar o modelo de comentário
- Atualizar BlogView
- 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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly