Comienza a construir tu Blog con Parse.js: Comentarios
Spanish (Español) translation by Joaquin Revuelta (you can also view the original English article)



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.



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):
- Crear el modelo de comentario.
- Actualizar la vista de la entrada.
- 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.
1 |
Comment = Parse.Object.extend('Comment', { |
2 |
})
|
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.
1 |
render: function() { |
2 |
var self = this, |
3 |
attributes = this.model.toJSON(), |
4 |
// A new query to filter out all the comment in this blog
|
5 |
query = new Parse.Query(Comment).equalTo("blog", this.model).descending('createdAt'), |
6 |
// Create a collection base on that new query
|
7 |
collection = query.collection(); |
8 |
// Fetch the collection
|
9 |
collection.fetch().then(function(comments) { |
10 |
// Store the comments as a JSON object and add it into attributes object
|
11 |
attributes.comment = comments.toJSON(); |
12 |
self.$el.html(self.template(attributes)); |
13 |
});
|
14 |
}
|
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:
1 |
{
|
2 |
ACL: Object, |
3 |
author: Object, |
4 |
authorName: "moyi", |
5 |
comment: Array[2], |
6 |
...
|
7 |
__proto__: Object |
8 |
}
|
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:
1 |
<!-- Comments -->
|
2 |
{{#if comment}} |
3 |
<h2>Comments</h2> |
4 |
<ul class="blog-comments list-unstyled"> |
5 |
{{#each comment}} |
6 |
<li class="blog-comment"> |
7 |
<div><a href="mailto:{{email}}">{{authorName}}</a> said:</div> |
8 |
<div>{{content}}</div> |
9 |
</li>
|
10 |
{{/each}} |
11 |
</ul>
|
12 |
{{/if}} |
Si primero quieres realizar una prueba, escribe unos cuantos comentarios falsos en tu base de datos de Parse.com y actualiza la página:



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:
1 |
<!-- Comment Form -->
|
2 |
<h2>Leave a Comment</h2> |
3 |
<form class="form-comment" role="form"> |
4 |
<div class="form-group"> |
5 |
<label for="comment-author-name">Name</label> |
6 |
<input name="authorName" type="text" class="form-control" id="comment-author-name" placeholder="Your name"> |
7 |
</div>
|
8 |
<div class="form-group"> |
9 |
<label for="comment-email">Email address</label> |
10 |
<input name="email" type="email" class="form-control" id="comment-email" placeholder="Your email"> |
11 |
</div>
|
12 |
<div class="form-group"> |
13 |
<label for="comment-content">Comment</label> |
14 |
<textarea name="content" class="form-control" rows="3" id="comment-content"></textarea> |
15 |
</div>
|
16 |
<button type="submit" class="btn btn-default">Submit</button> |
17 |
</form>
|
Paso 2: Añade un Evento para enviar el Formulario
Añadamos ahora un evento en el BlogView
:
1 |
events: { |
2 |
'submit .form-comment': 'submit' |
3 |
}
|
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.
1 |
submit: function(e) { |
2 |
e.preventDefault(); |
3 |
var data = $(e.target).serializeArray(), |
4 |
comment = new Comment(); |
5 |
comment.add({ |
6 |
blog: this.model, |
7 |
authorName: data[0].value, |
8 |
email: data[1].value, |
9 |
content: data[2].value |
10 |
});
|
11 |
}
|
Haz una prueba, y con toda seguridad el nuevo comentario estará en la parte superior:



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.