Comienza a construir tu Blog con Parse.js: Comentarios

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):

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.

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

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.

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

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:

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

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:

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

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:

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

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

Añadamos ahora un evento en el BlogView:

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

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.

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

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.