Las extensiones como Thorax.js tienen una cantidad de herramientas que nos permiten facilitar la construcción de ciertos comportamientos de nuestras aplicaciones, con ello si leemos bien la documentación podemos encontrar funcionalidades que nos evitaran tener que construir ciertos bloques de código nosotros mismos.
Una sección en la cual estos helpers son de mucha ayuda es la sección de vistas, ya que acá es donde necesitaremos interactuar de una manera más directa con nuestros usuarios, por lo que seguramente necesitaremos mostrar textos y elementos, poder dar dinamismo a la sección, etc.
registerViewHelper
Como habíamos adelantado el registerViewHelper es un método que nos ayuda a crear un nuevo bloque que va a tener embebido un HelperView, con ello podremos crear una instancia de vista hija que nos permita acceder al contexto de la vista padre, es decir, que sería como una extensión de la misma. De esta manera podremos crear nuevas funcionalidades que puedan darnos la posibilidad de utilizar más métodos con menor cantidad de esfuerzo al momento de desarrollar.
Veamos el siguiente ejemplo donde vamos a generar un helper en un evento 'on' que será renderizado cada vez que se llame o se detone un evento en la declaración de la vista. Esto nos da la posibilidad de generar eventos personalizados que llamen al helper para realizar nuestras funcionalidades de la aplicación:
Veamos cómo podemos hacer un ejemplo más claro, vamos a implementar un contador que se vaya incrementado cada vez que hagamos click sobre un botón.
Este código muestra como generamos nuestro evento “on” con un evento personalizado, luego creamos un botón y le colocamos como trigger la función “incrementar” que corresponde a nuestro evento personalizado que hemos declarado en la línea anterior.
Luego en la siguiente imagen vemos cómo podemos colocar el código en la clase de la vista correspondiente:
Como vemos hemos resumido lo que podría habernos llevado más líneas de código en algo bastante simple y mucho más fácil de depurar y de hacer mantenimiento. Este tipo de estructuras se presta bastante para poder hacer mejores aplicaciones de una sola página, dejando abierta la puerta para poder aplicar más elementos asíncronos.
Como vemos es muy fácil aplicar mejores patrones de desarrollo, la inclusión de los helpers dota de mejores funcionalidades, al estar ya desarrolladas y documentadas por el equipo de Thorax.js y su comunidad podemos asegurarnos que tendremos un bajo número de bugs y errores, y con cada actualización estos pondrán ir siendo corregidos aumentando así la seguridad de nuestras aplicaciones.
Una sección en la cual estos helpers son de mucha ayuda es la sección de vistas, ya que acá es donde necesitaremos interactuar de una manera más directa con nuestros usuarios, por lo que seguramente necesitaremos mostrar textos y elementos, poder dar dinamismo a la sección, etc.
registerViewHelper
Como habíamos adelantado el registerViewHelper es un método que nos ayuda a crear un nuevo bloque que va a tener embebido un HelperView, con ello podremos crear una instancia de vista hija que nos permita acceder al contexto de la vista padre, es decir, que sería como una extensión de la misma. De esta manera podremos crear nuevas funcionalidades que puedan darnos la posibilidad de utilizar más métodos con menor cantidad de esfuerzo al momento de desarrollar.
Veamos el siguiente ejemplo donde vamos a generar un helper en un evento 'on' que será renderizado cada vez que se llame o se detone un evento en la declaración de la vista. Esto nos da la posibilidad de generar eventos personalizados que llamen al helper para realizar nuestras funcionalidades de la aplicación:
Veamos cómo podemos hacer un ejemplo más claro, vamos a implementar un contador que se vaya incrementado cada vez que hagamos click sobre un botón.
¿Cómo realizar el efecto?
Utilizaremos un helper de botones de Thorax.js que nos va a ayudar a hacer un llamado a un método cada vez que se haga click sobre el elemento. Esto es lo que nos permite darle un mayor efecto dinámico a nuestra aplicación.
Este código muestra como generamos nuestro evento “on” con un evento personalizado, luego creamos un botón y le colocamos como trigger la función “incrementar” que corresponde a nuestro evento personalizado que hemos declarado en la línea anterior.
{{#on "incrementar"}}{{i}}{/on}}
{{#button trigger="incrementar"}}Aumentar{{/button}}
Luego en la siguiente imagen vemos cómo podemos colocar el código en la clase de la vista correspondiente:
Como vemos hemos resumido lo que podría habernos llevado más líneas de código en algo bastante simple y mucho más fácil de depurar y de hacer mantenimiento. Este tipo de estructuras se presta bastante para poder hacer mejores aplicaciones de una sola página, dejando abierta la puerta para poder aplicar más elementos asíncronos.
Como vemos es muy fácil aplicar mejores patrones de desarrollo, la inclusión de los helpers dota de mejores funcionalidades, al estar ya desarrolladas y documentadas por el equipo de Thorax.js y su comunidad podemos asegurarnos que tendremos un bajo número de bugs y errores, y con cada actualización estos pondrán ir siendo corregidos aumentando así la seguridad de nuestras aplicaciones.
