La ventaja de trabajar con un framework MVC es que podemos separar los diferentes ámbitos de la aplicación en capas, ya sabemos que el modelo y el controlador son las capas que se encargar de darle la funcionalidad interna y la implementación lógica a nuestra aplicación, sin embargo es en la parte de la vista donde se crea el mayor impacto ya que es lo que el usuario verá.
Para manejar la vista tenemos varias opciones, sabemos que tenemos que tener un motor de plantillas, lo interesante es que podemos usar alguna de las muchas opciones y para permitirnos esto, tenemos el método render() que es el que hará el llamado a la plantilla y mostrar los datos.
Método render()
Si necesitamos definir la lógica de como mostrar una plantilla podemos utilizar el método opcional render().
Acá vemos cómo hacemos un bloque <script> al cual le definimos que su tipo será text/template y le añadimos un id-template, esto nos servirá cuando estemos enviando la información al motor de plantillas.
Funcionamiento
Existe un método en Underscore llamado ._template que compila el código de la plantilla en Javascript y lo transforma en funciones que luego podemos evaluar y mostrar.
Por ejemplo al método le pasamos las etiquetas que utilizará utilizando un id en el caso del código anterior es el id-template, con esto, el método ._template ya sabe dónde debe retornar los datos.
Luego el método render() utiliza la plantilla pasándole datos utilizando el método toJSON() que traduce de alguna forma los atributos del modelo que hemos asociado a la vista. Entonces la plantilla retorna el HTML concreto y lo añadimos al árbol DOM del documento utilizando la propiedad $el.
Ejemplos de Uso
Existe una convención en la cual debemos retornar this al final del método render(), esto nos ayuda a hacer vistas reusables en otras vistas y también para crear listas de elementos que serán dibujadas una vez que estén todos los elementos y no uno por uno ahorrándonos así un poco de recursos.
Veamos a continuación una imagen de un ejemplo de cómo construir una vista de lista:
Vemos que dentro del método render() utilizamos this para añadirle a la propiedad $el, el contenido del modelo y luego podemos retornar todo esto con el return this.
Bastante simple de implementar, pero de mucha ayuda ya que esto nos permitirá utilizar esta lista inclusive como una sub vista dentro de otras vistas padres.
Finalizamos el tutorial conociendo el método render() y su gran importancia a la hora de definir vistas que puedan ser reusables.
Para manejar la vista tenemos varias opciones, sabemos que tenemos que tener un motor de plantillas, lo interesante es que podemos usar alguna de las muchas opciones y para permitirnos esto, tenemos el método render() que es el que hará el llamado a la plantilla y mostrar los datos.
Método render()
Si necesitamos definir la lógica de como mostrar una plantilla podemos utilizar el método opcional render().
Importante
En este tutorial vamos a utilizar Underscore como motor de plantillas y adicionalmente vamos a tomar el siguiente HTML como base:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> </head> <body> <div id="todo"> </div> <script type="text/template" id="item-template"> <div> <input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>> <%= title %> </div> </script> <script src="underscore-min.js"></script> <script src="backbone-min.js"></script> <script src="jquery-min.js"></script> <script src="example.js"></script> </body> </html>
Acá vemos cómo hacemos un bloque <script> al cual le definimos que su tipo será text/template y le añadimos un id-template, esto nos servirá cuando estemos enviando la información al motor de plantillas.
Funcionamiento
Existe un método en Underscore llamado ._template que compila el código de la plantilla en Javascript y lo transforma en funciones que luego podemos evaluar y mostrar.
Por ejemplo al método le pasamos las etiquetas que utilizará utilizando un id en el caso del código anterior es el id-template, con esto, el método ._template ya sabe dónde debe retornar los datos.
Luego el método render() utiliza la plantilla pasándole datos utilizando el método toJSON() que traduce de alguna forma los atributos del modelo que hemos asociado a la vista. Entonces la plantilla retorna el HTML concreto y lo añadimos al árbol DOM del documento utilizando la propiedad $el.
Esto puede sonar a mucho trabajo pero realmente todo lo realiza el framework junto con el motor de plantillas, por lo que nuestra intervención es mucho más simple que si tuviésemos que hacer todo esto sin su ayuda.
Ejemplos de Uso
Existe una convención en la cual debemos retornar this al final del método render(), esto nos ayuda a hacer vistas reusables en otras vistas y también para crear listas de elementos que serán dibujadas una vez que estén todos los elementos y no uno por uno ahorrándonos así un poco de recursos.
Veamos a continuación una imagen de un ejemplo de cómo construir una vista de lista:
Vemos que dentro del método render() utilizamos this para añadirle a la propiedad $el, el contenido del modelo y luego podemos retornar todo esto con el return this.
Bastante simple de implementar, pero de mucha ayuda ya que esto nos permitirá utilizar esta lista inclusive como una sub vista dentro de otras vistas padres.
Finalizamos el tutorial conociendo el método render() y su gran importancia a la hora de definir vistas que puedan ser reusables.
