WEBVTT

00:00:01.056 --> 00:00:06.176 align:middle
Este es nuestro próximo objetivo: escribir algo de
JavaScript para que cuando hagamos click en los

00:00:06.176 --> 00:00:11.816 align:middle
íconos de arriba o abajo, se realice un request
AJAX a nuestra ruta JSON.

00:00:12.376 --> 00:00:17.436 align:middle
Este "simula" guardar el voto en la
base de datos y retorna el nuevo recuento de votos,

00:00:18.026 --> 00:00:21.006 align:middle
el cual usaremos para actualizar
el número de votos en la página.

00:00:21.796 --> 00:00:27.016 align:middle
El template de esta página es:
templates/question/show.html.twig.

00:00:27.016 --> 00:00:32.556 align:middle
Para cada respuesta, tenemos estos links de
votar-arriba y votar-abajo.

00:00:33.246 --> 00:00:37.246 align:middle
Voy a agregar algunas clases a
esta sección para ayudar a nuestro JavaScript.

00:00:38.136 --> 00:00:43.176 align:middle
En el elemento vote-arrows,
agrega una clase js-vote-arrows:

00:00:43.936 --> 00:00:46.926 align:middle
lo usaremos en el JavaScript para
encontrar el elemento.

00:00:47.806 --> 00:00:54.476 align:middle
Luego, en el link de vote-up, agrega un atributo
data llamado data-direction="up".

00:00:56.376 --> 00:01:00.246 align:middle
Haz lo mismo para el link de abajo:
data-direction="down".

00:01:01.046 --> 00:01:03.576 align:middle
Esto nos ayudará a saber en cuál link se hizo click.

00:01:03.576 --> 00:01:15.816 align:middle
Finalmente, rodea el numero de votos - el 6 - con
un span que contenga otra clase: js-vote-total.

00:01:16.286 --> 00:01:20.156 align:middle
Usaremos esto para encontrar el elemento
para poder actualizar ese número.

00:01:20.746 --> 00:01:25.616 align:middle
Para simplificar las cosas, el código JavaScript
que escribiremos usará jQuery.

00:01:26.266 --> 00:01:33.286 align:middle
De hecho, si tu sitio usa jQuery, probablemente
querrás incluir jQuery en cada página...

00:01:34.106 --> 00:01:38.986 align:middle
lo cual significa que queremos agregar
una etiqueta script a base.html.twig.

00:01:39.966 --> 00:01:44.166 align:middle
En la parte de abajo, fíjate que
tenemos un bloque llamado javascripts.

00:01:45.006 --> 00:01:49.666 align:middle
Dentro de este bloque, voy a pegar una etiqueta
<script> para descargar jQuery desde un CDN.

00:01:49.666 --> 00:01:55.776 align:middle
Puedes copiar esto desde el bloque de código
en esta página, o ir a jQuery para obtenerlo.

00:01:55.776 --> 00:02:01.266 align:middle
Si te preguntas por qué pusimos esto
dentro del bloque javascripts...

00:02:01.526 --> 00:02:06.406 align:middle
más allá de que "parece" un lugar
lógico, te mostraré por qué en un minuto.

00:02:07.036 --> 00:02:12.736 align:middle
Ya que, técnicamente, si pusiéramos esto
luego del bloque javascripts o antes,

00:02:13.236 --> 00:02:15.876 align:middle
no habría ninguna diferencia por el momento.

00:02:16.966 --> 00:02:19.806 align:middle
Pero ponerlos dentro va a ser útil pronto.

00:02:19.806 --> 00:02:25.726 align:middle
Para nuestro propio JavaScript, dentro del directorio
public/, crea un nuevo directorio llamado js/.

00:02:25.726 --> 00:02:30.466 align:middle
Y luego, un archivo: question_show.js.

00:02:31.806 --> 00:02:36.706 align:middle
Esta es la idea: usualmente
tendrás algún código JavaScript

00:02:36.836 --> 00:02:39.736 align:middle
que querrás incluir en cada página.

00:02:40.816 --> 00:02:46.516 align:middle
No tenemos ninguno por el momento, pero si
lo tuviéramos, yo crearía un archivo app.js

00:02:47.026 --> 00:02:50.906 align:middle
y agregaría una etiqueta script para ello en base.html.twig.

00:02:51.746 --> 00:02:58.236 align:middle
Luego, en ciertas páginas, podrías necesitar
incluir algún JavaScript específico para la página,

00:02:58.746 --> 00:03:04.036 align:middle
como por ejemplo, para hacer funcionar el voto de
comentarios que solo vive en una página.

00:03:04.946 --> 00:03:10.176 align:middle
Esto es lo que estoy haciendo y esta es la razón
por la que creé un archivo llamado question_show.js:

00:03:10.176 --> 00:03:14.506 align:middle
Es JavaScript específico para esa página.

00:03:15.486 --> 00:03:19.966 align:middle
Dentro de question_show.js, voy a
pegar al rededor de 15 líneas de código.

00:03:20.716 --> 00:03:29.236 align:middle
Esto encuentra el elemento .js-vote-arrows - el cual agregamos
aquí - encuentra cualquier etiqueta dentro del mismo,

00:03:29.526 --> 00:03:32.036 align:middle
y registra una función para el evento click allí.

00:03:32.536 --> 00:03:41.096 align:middle
Al hacer click, hacemos una llamada AJAX a
/comments/10 - el 10 es escrito a mano por ahora -

00:03:41.096 --> 00:03:48.236 align:middle
/vote/ y luego leemos el atributo data-direction
del elemento <a> para saber

00:03:48.236 --> 00:03:51.546 align:middle
si este es un voto arriba o abajo.

00:03:52.726 --> 00:03:57.546 align:middle
Al finalizar exitosamente, jQuery nos pasa
los datos JSON de nuestra llamada.

00:03:58.426 --> 00:04:01.976 align:middle
Renombremos esa variable a
data para ser más exactos.

00:04:04.606 --> 00:04:07.256 align:middle
Luego usamos el campo votes de los datos -

00:04:07.526 --> 00:04:12.256 align:middle
porque en nuestro controlador, estamos retornando
una variable votes - para actualizar el total de votos.

00:04:13.076 --> 00:04:15.846 align:middle
Entonces... ¿Cómo incluimos este archivo?

00:04:16.496 --> 00:04:21.176 align:middle
Si quisiéramos incluir esto en
cada página, sería bastante fácil:

00:04:21.686 --> 00:04:26.096 align:middle
agrega otra etiqueta script abajo de
jQuery en base.html.twig.

00:04:27.036 --> 00:04:30.856 align:middle
Pero queremos incluir esto
solo en la página show.

00:04:31.716 --> 00:04:38.066 align:middle
Aquí es donde tener el script de jQuery
dentro del bloque javascripts es útil.

00:04:38.716 --> 00:04:43.206 align:middle
Porque, en un template "hijo",
podemos sobreescribir ese bloque.

00:04:43.996 --> 00:04:49.446 align:middle
Echemos un vistazo: en show.html.twig, no
importa donde - pero vayamos al final,

00:04:49.966 --> 00:04:52.936 align:middle
di {% block javascripts %} {% endblock %}.

00:04:54.836 --> 00:04:58.466 align:middle
Dentro, agrega una etiqueta <script> con src="".

00:04:58.466 --> 00:05:02.806 align:middle
Ah, tenemos que recordar
usar la función asset().

00:05:03.296 --> 00:05:08.366 align:middle
Pero... PhpStorm nos sugiere
js/question_show.js.

00:05:08.816 --> 00:05:09.506 align:middle
Selecciona ese.

00:05:10.326 --> 00:05:13.326 align:middle
¡Muy bien! Agregó la función asset() por nosotros.

00:05:13.436 --> 00:05:20.636 align:middle
Si paráramos ahora, esto literalmente sobreescribiría
el bloque javascripts de base.html.twig.

00:05:21.076 --> 00:05:24.616 align:middle
Por lo que jQuery no sería incluido en la página.

00:05:25.236 --> 00:05:30.936 align:middle
¡En vez de sobreescribir el bloque, lo que
realmente queremos es agregar algo a él!

00:05:30.936 --> 00:05:37.036 align:middle
En el HTML final, queremos que nuestra nueva
etiqueta script vaya justo debajo de jQuery.

00:05:37.566 --> 00:05:38.486 align:middle
¿Cómo podemos hacer esto?

00:05:39.126 --> 00:05:42.696 align:middle
Sobre nuestra etiqueta script, di {{ parent() }}.

00:05:43.736 --> 00:05:45.006 align:middle
¡Me encanta!

00:05:45.746 --> 00:05:49.996 align:middle
La función parent() toma el contenido del
bloque padre, y lo imprime.

00:05:50.746 --> 00:05:51.476 align:middle
¡Probémoslo!

00:05:51.946 --> 00:05:53.086 align:middle
Refresca y...

00:05:53.426 --> 00:05:56.136 align:middle
Haz click en up. ¡Se actualiza!

00:05:56.746 --> 00:06:00.076 align:middle
Y si hacemos click en down, vemos un número muy bajo.

00:06:00.776 --> 00:06:04.316 align:middle
Ah, y ¿Ves este número "6"
aquí abajo en la barra de herramientas debug?

00:06:04.706 --> 00:06:06.146 align:middle
Esto es genial.

00:06:06.566 --> 00:06:07.516 align:middle
Refresca la página.

00:06:07.926 --> 00:06:10.356 align:middle
Fíjate que el ícono no está aquí abajo.

00:06:10.976 --> 00:06:14.886 align:middle
¡Pero, tan pronto como nuestra página hace
una llamada AJAX, aparece!

00:06:15.536 --> 00:06:21.146 align:middle
Sip, la barra de herramientas debug detecta
llamadas AJAX y las enlista aquí.

00:06:21.856 --> 00:06:28.846 align:middle
¡La mejor parte es que puedes usar esto para
saltar al profiler para cualquiera de estos requests!

00:06:28.846 --> 00:06:32.746 align:middle
Voy a hacer click con el botón derecho y abriré este
link de voto "abajo" en una nueva pestaña.

00:06:33.446 --> 00:06:38.656 align:middle
Este es el profiler completo para la
llamada en todo su esplendor.

00:06:39.306 --> 00:06:43.046 align:middle
Si usas dump() en alguna parte de
tu código, la variable volcada

00:06:43.046 --> 00:06:45.156 align:middle
para esa llamada AJAX estará aquí.

00:06:45.716 --> 00:06:48.366 align:middle
Y luego, tendremos una sección de base de datos aquí.

00:06:48.976 --> 00:06:51.146 align:middle
Esta es una funcionalidad maravillosa.

00:06:52.046 --> 00:06:58.356 align:middle
A continuación, ajustemos nuestra ruta de la API:
No deberíamos poder hacer un request GET

00:06:58.356 --> 00:07:00.616 align:middle
al mismo - como si lo abriéramos en nuestro navegador.

00:07:01.236 --> 00:07:06.236 align:middle
Y... ¿Tenemos algo que valide que el
comodín {direction}...

00:07:06.236 --> 00:07:10.136 align:middle
de la URL sea up o down pero nada más?

00:07:10.506 --> 00:07:11.436 align:middle
Todavía no.