Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Comienza a construir tu Blog con Parse.js: Comentarios

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

Spanish (Español) translation by Joaquin Revuelta (you can also view the original English article)

Final product image
What You'll Be Creating

Esta serie de tutoriales llega a su fin. Si nos has seguido hasta ahora, es de esperar que tengas una comprensión sólida del framework MVC, y de como funciona Parse.js. En la última sesión, añadimos el borrado, la forma de desconectarte del sitio, y la vista de una entrada única, Y en esta, vamos a añadir el área de comentarios bajo las entradas.

La sección de comentarios tendrá dos partes: un formulario para comentar en la parte superior, y una lista de comentarios a esa entrada del blog en la parte inferior.

outcome

Como tenemos que implementar muchas funcionalidades, voy a hacerlo un poco más rápido y agruparé el contenido en tres grandes bloques (o pasos):

  1. Crear el modelo de comentario.
  2. Actualizar la vista de la entrada.
  3. Añadir el formulario de comentarios.

1. Crear el modelo de comentario

Paso 1: la clase Comment

El modelo siempre aparece en primer lugar. Sigamos adelante y creemos una nueva clase en Parse.com.

La nueva clase comment debería tener estos campos:

  • Indicador blog
  • Cadena authorName
  • Cadena email
  • Cadena content

El indicador nos devuelve al artículo del blog al que pertenece, y los otros tres campos almacenan la información clave para ese comentario. Por las características de este tutorial, no voy a usar los controles de acceso al sitio aquí, pero puedes echar un vistazo a la documentación de Parse.js sobre la clase User para más detalles.

Paso 2: El objeto Comment

A continuación, creemos el modelo Comment en nuestro archivo blog.js. Te darás cuenta de que es muy similar al modelo Blog que creamos. La única diferencia es que no vamos a permitir a los usuarios que editen sus comentarios más tarde, así que usaremos una función .add() en lugar de la función .update() . Por supuesto, tienes la libertad de hacerla editable si quieres.

2. Actualizar el BlogView

Centrándonos en la vista, puesto que tenemos esta sección de comentarios en BlogView, también podemos obtener el comentario en en el BlogView. Colocaremos eso dentro de la función .render() .

Paso 1: Reunir los comentarios

Primero necesitamos reunir los comentarios del presente artículo.

Observa que añadimos .descending('createdAt') a la búsqueda para que el último comentario siempre aparezca en primer lugar.

Si llamamos a attributes justo antes de que lo presentemos, podemos ver que el objeto se estructurará de la siguiente forma:

Y puedes ver que los comentarios se almacenan en una matriz, preparados para ser presentados.

Paso 2: Mostrar los comentarios

Ahora tenemos comentarios que son enviados a nuestra plantilla HTML dentro de attribute, es el momento de realizar un ciclo a través de la matriz con la sintáxis handlebar.js:

Si primero quieres realizar una prueba, escribe unos cuantos comentarios falsos en tu base de datos de Parse.com y actualiza la página:

Test Comment

3. Añade el formulario para los comentarios

Ahora es el momento de añadir el formulario de comentarios.

Paso 1: Añade el HTML

Añade esta estructura HTML justo encima de la sección de comentarios:

Paso 2: Añade un Evento para enviar el Formulario

Añadamos ahora un evento en el BlogView:

Paso 3: Escribamos la función submit()

Y ahora escribamos la función submit(). Si todavía recuerdas cómo escribimos la función de enviar para el WriteBlogView, esta es bastante similar.

Sólo ten en cuenta que esta vez necesitamos usar this.model como blog para el nuevo comentario.

Haz una prueba, y con toda seguridad el nuevo comentario estará en la parte superior:

New Comment

Conclusión

En esta sesión, hemos desarrollado la función de comentarios en tres rápidos pasos. Es de esperar que ahora sea fácil para ti, y que puedas escribir la mayoría de los pasos por ti mismo.

En la próxima sesión, voy a mostrarte una última característica: añadir categorías al blog. Después de ello, os dejaré ahí, como desarrolladores capaces de Parse.js. Permanece atento y escríbeme todas las cuestiones y feedback que puedas tener.

Advertisement
Advertisement
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.