Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

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

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Delete, Logout, and Single Blog View
Get Started Building Your Blog With Parse.js: Categories

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

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:

outcome

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.

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:

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:

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:

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

Test Comment

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:

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

Agora, adicionemos um evento em BlogView:

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.

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

New Comment

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.