Los formularios son una parte integral de cualquier aplicación o página web, ya que es uno de los medios que nos permite obtener datos de los usuarios de forma nativa, esto hace que procesarlos sea una tarea muy común.
Knockout.js nos permite trabajar con su objeto data-bind todos los elementos que pueden conformar un formulario, dando así la posibilidad de poder validar, disparar eventos, asignar observables, etc. Esto hace que el procesamiento de formularios en el lado del cliente sea viable, y así añadimos una capa adicional de validaciones antes de que llegue al lado de servidor.
Antes de pasar a ejemplos con casos que podemos aplicar, es muy importante saber los data-binds que pueden funcionar con los elementos del formulario de nuestra aplicación, de esta manera podremos empezar a obtener una idea de que podemos y que no podemos lograr, sobre todo las vías a las que podemos llegar a obtener los resultados que necesitamos para que nuestra aplicación funcione de manera adecuada:
z.
Lo más interesante de estos data-binds es que funcionan en dos vías, es decir, cuando hay un cambio en un elemento podemos recibirlo en nuestra vista modelo y hacer algún procesamiento de ser necesario, pero también si tenemos un observable y queremos hacer algo desde la aplicación hacia el formulario también podemos sin ningún tipo de problema, siempre y cuando estemos utilizando el data-bind adecuado para el tipo de elemento del formulario, ya que Knockout.js no va a interpretar instrucciones erróneas como pudiera hacer un navegador con código HTML.
Veamos ahora un ejemplo práctico de cómo podemos utilizar todos los conceptos que hemos venido hablando en la sección anterior de este tutorial, vamos a crear un elemento de tipo textarea que va a aceptar solo 140 caracteres, como existe esta restricción debemos informarle al usuario cuantos caracteres le van quedando a medida que va escribiendo.
La lógica que utilizaremos es muy sencilla, vamos a incluir el data-bind textInput en el elemento textarea de nuestro formulario, luego en nuestra vista modelo lo vamos a establecer como un observable, y así podemos entonces empezar a capturar los caracteres a medida que el usuario está escribiendo. Finalmente utilizamos un elemento computed para crear un observable compuesto con el total de los caracteres restantes, de momento no vamos a forzar al usuario a escribir menos, solo le informamos los caracteres. Veamos el código de nuestro ejemplo:
Por supuesto aquí no podemos apreciar de manera dinámica como nuestro contador baja, pero al escribir nuestro contador de caracteres restantes va siendo actualizado a medida que se va escribiendo en el elemento textarea del formulario:
Otro aspecto que necesitamos a menudo en nuestras aplicaciones al trabajar con formularios son los eventos, ya que con ellos podemos detonar acciones cuando el usuario hace algo en particular, como por ejemplo un click, o pasar el mouse sobre alguna sección en específico de nuestro HTML. Veamos algunos de los eventos que podemos utilizar en nuestros formularios:
Existe también la posibilidad de utilizar otros eventos que estén disponibles en el DOM como por ejemplo mouseover, keypress para poder extender la funcionalidad de nuestra vista modelo hasta esos niveles.
En el siguiente ejercicio vamos a aplicar los conocimientos de eventos que hemos adquirido, vamos a crear un pequeño formulario donde vamos a tener una lista, y cada vez que pasemos el mouse sobre una opción de la misma se mostrará una imagen, por supuesto esta será una implementación demostrativa y no está apta para producción sin embargo nos sirve para ir entendiendo lo que hemos venido trabajando.
En este caso necesitaremos adicionalmente a Knockout.js la librería de jQuery para utilizar algunos efectos en nuestra aplicación, por lo que lo ideal es descargarla y guardar en la misma carpeta o directorio en la que tenemos a Knockout.js, o tal vez utilizarla desde su CDN oficial. Veamos entonces el código que necesitamos:
En la parte del HTML vemos que hemos creado una lista con los elementos pertenecientes al listado cosas y finalmente indicamos que el evento es mouseover y la función que debe ejecutar cuando ocurre dicho evento. Veamos como luce nuestra aplicación cuando la ejecutamos en nuestro navegador:
Luego si movemos el cursor del mouse a algunos de los textos la imagen correspondiente cargará y podemos ver la funcionalidad de nuestro ejemplo:
Por supuesto al ser un cambio dinámico no podemos apreciar el cambio, pero si movemos el cursor al elemento superior la imagen cambiará. Con esto hemos finalizado este tutorial, con lo cual hemos profundizado en el trabajo de formularios con Knockout.js, dándonos herramientas para mejorar la captura y la validación de los datos que provengan de nuestros usuarios.
Knockout.js nos permite trabajar con su objeto data-bind todos los elementos que pueden conformar un formulario, dando así la posibilidad de poder validar, disparar eventos, asignar observables, etc. Esto hace que el procesamiento de formularios en el lado del cliente sea viable, y así añadimos una capa adicional de validaciones antes de que llegue al lado de servidor.
Requisitos
Solo necesitaremos tener Knockout.js en nuestro sistema y accesible para las aplicaciones que vamos a crear, permisos para escribir archivos, una conexión a Internet para obtener las librerías si no las tenemos, y un editor de textos como Sublime Text o NotePad ++. Para ejecutar las aplicaciones necesitamos un servidor web tipo Apache o Nginx en nuestro ambiente de pruebas.
Data-bindings de un formulario
Antes de pasar a ejemplos con casos que podemos aplicar, es muy importante saber los data-binds que pueden funcionar con los elementos del formulario de nuestra aplicación, de esta manera podremos empezar a obtener una idea de que podemos y que no podemos lograr, sobre todo las vías a las que podemos llegar a obtener los resultados que necesitamos para que nuestra aplicación funcione de manera adecuada:
Data-bind value
Este es utilizado en los elementos de entrada de valores o de selección, pueden ser los elementos input, textarea o select, con ello logramos capturar el valor del elemento al momento en que necesitemos utilizarlo.
Data-bind textInput
Este binding es utilizado con los elementos input y textarea, su función es similar a value sin embargo si le asignamos un observable podremos capturar los valores a medida que el usuario vaya interactuando con el elemento, a diferencia de value que nos da el valor cuando el elemento cambia, por ejemplo cuando pierde el focus.
Data-bind checked
Es utilizado con los elementos del tipo checkbox y radio buttons, como su nombre lo indica nos permite establecer o saber si un elemento está seleccionado en una estructura que utilice los elementos mencionados.
Data-bind options
Al utilizar este binding podemos llenar un elemento select con las opciones que va a desplegar en el formulario, es perfecto cuando queremos hacer un catálogo de opciones de forma dinámica.
Data-bind selectedOptions
También exclusivo del elemento select, se utiliza cuando necesitamos establecer las opciones seleccionadas al establecer la propiedad multi, ya que necesitamos elegir más de una opción a la ve
Data-bind enable/disable
Nos permite habilitar o deshabilitar cualquiera de los diferentes elementos del formulario, con esto logramos sacar un elemento si no es necesario de utilizar en el flujo de la aplicación bajo alguna condición en particular, donde enable sirve para habilitar y disable para deshabilitar, en caso que no sepamos el significado de cada palabra.
Lo más interesante de estos data-binds es que funcionan en dos vías, es decir, cuando hay un cambio en un elemento podemos recibirlo en nuestra vista modelo y hacer algún procesamiento de ser necesario, pero también si tenemos un observable y queremos hacer algo desde la aplicación hacia el formulario también podemos sin ningún tipo de problema, siempre y cuando estemos utilizando el data-bind adecuado para el tipo de elemento del formulario, ya que Knockout.js no va a interpretar instrucciones erróneas como pudiera hacer un navegador con código HTML.
Ejemplo práctico
Veamos ahora un ejemplo práctico de cómo podemos utilizar todos los conceptos que hemos venido hablando en la sección anterior de este tutorial, vamos a crear un elemento de tipo textarea que va a aceptar solo 140 caracteres, como existe esta restricción debemos informarle al usuario cuantos caracteres le van quedando a medida que va escribiendo.
La lógica que utilizaremos es muy sencilla, vamos a incluir el data-bind textInput en el elemento textarea de nuestro formulario, luego en nuestra vista modelo lo vamos a establecer como un observable, y así podemos entonces empezar a capturar los caracteres a medida que el usuario está escribiendo. Finalmente utilizamos un elemento computed para crear un observable compuesto con el total de los caracteres restantes, de momento no vamos a forzar al usuario a escribir menos, solo le informamos los caracteres. Veamos el código de nuestro ejemplo:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Formularios en knockout.js</title> </head><body> <h4>Ingrese un texto</h4> <br/> <textarea data-bind="textInput: cajaTexto"></textarea><br/> Caracteres restantes: <span data-bind="text: caracteresRestantes"></span> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function ViewModel() { var self = this; self.cajaTexto = ko.observable(''); self.limiteCaracteres = 140; self.caracteresRestantes = ko.computed(function() { return self.limiteCaracteres - self.cajaTexto().length; }); }; var vistaModelo = new ViewModel(); ko.applyBindings(vistaModelo); </script> </body></html>Cabe destacar que no utilizamos el data-bind value porque necesitamos que ocurra el cambio de la cantidad de caracteres restantes al momento que el usuario escribe, ya que si no solo podríamos indicarle la cantidad al momento en que pase a otro elemento y eso no sería óptimo para lo que estamos apuntando al utilizar Knockout.js, sin embargo habrán casos en que sea necesario ese tipo de comportamiento, todo depende de lo que nuestra aplicación necesite. Veamos entonces como luce nuestro ejemplo cuando lo ejecutamos en el navegador:
Por supuesto aquí no podemos apreciar de manera dinámica como nuestro contador baja, pero al escribir nuestro contador de caracteres restantes va siendo actualizado a medida que se va escribiendo en el elemento textarea del formulario:
Manejo de eventos
Otro aspecto que necesitamos a menudo en nuestras aplicaciones al trabajar con formularios son los eventos, ya que con ellos podemos detonar acciones cuando el usuario hace algo en particular, como por ejemplo un click, o pasar el mouse sobre alguna sección en específico de nuestro HTML. Veamos algunos de los eventos que podemos utilizar en nuestros formularios:
Evento submit
Este evento solo puede ser utilizado en el elemento form, y se activa justo al momento en que el usuario envía el formulario al servidor, ya sea a través de un input submit, o con algún otro método.
Evento click
Este evento es un viejo conocido, como su nombre lo indica se activa al hacer click sobre algún elemento dentro de nuestra aplicación.
Evento hasFocus
Este evento se activa al momento en que un elemento generalmente input, textarea o select es seleccionado por el usuario y está activo en ese momento.
Existe también la posibilidad de utilizar otros eventos que estén disponibles en el DOM como por ejemplo mouseover, keypress para poder extender la funcionalidad de nuestra vista modelo hasta esos niveles.
Ejemplo de eventos
En el siguiente ejercicio vamos a aplicar los conocimientos de eventos que hemos adquirido, vamos a crear un pequeño formulario donde vamos a tener una lista, y cada vez que pasemos el mouse sobre una opción de la misma se mostrará una imagen, por supuesto esta será una implementación demostrativa y no está apta para producción sin embargo nos sirve para ir entendiendo lo que hemos venido trabajando.
En este caso necesitaremos adicionalmente a Knockout.js la librería de jQuery para utilizar algunos efectos en nuestra aplicación, por lo que lo ideal es descargarla y guardar en la misma carpeta o directorio en la que tenemos a Knockout.js, o tal vez utilizarla desde su CDN oficial. Veamos entonces el código que necesitamos:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Formularios en knockout.js</title> </head><body> <img id="cosa_actual" /> <ul> <!-- ko foreach: cosas --> <li data-bind="text: descripcion, event: { mouseover: $parent.cargarImagen }"></li> <!-- /ko --> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/knockout-3.3.0.js" type="text/javascript"></script> <script> function ViewModel() { var self = this; self.cosas = [ { descripcion: 'Nuestra casa es muy lujosa y por esa razon nos gusta mucho', imagen: 'casa.jpg' }, { descripcion: 'Nuestro automovil es muy veloz y tiene tecnologia de punta', imagen: 'auto.jpg' } ]; self.cargarImagen = function(data, event) { $('#cosa_actual').attr('src', data.imagen); }; }; var vistaModelo = new ViewModel(); ko.applyBindings(vistaModelo); </script> </body></html>Aquí lo que simplemente hemos hecho es crear un listado de cosas con una descripción y una imagen, esta imagen puede estar en cualquier parte accesible por la aplicación hemos elegido en este caso el directorio raíz de la misma, luego creamos una función que le añada la imagen a un selector con jQuery de forma que podamos mostrar la misma en el DOM.En la parte del HTML vemos que hemos creado una lista con los elementos pertenecientes al listado cosas y finalmente indicamos que el evento es mouseover y la función que debe ejecutar cuando ocurre dicho evento. Veamos como luce nuestra aplicación cuando la ejecutamos en nuestro navegador:
Luego si movemos el cursor del mouse a algunos de los textos la imagen correspondiente cargará y podemos ver la funcionalidad de nuestro ejemplo:
Por supuesto al ser un cambio dinámico no podemos apreciar el cambio, pero si movemos el cursor al elemento superior la imagen cambiará. Con esto hemos finalizado este tutorial, con lo cual hemos profundizado en el trabajo de formularios con Knockout.js, dándonos herramientas para mejorar la captura y la validación de los datos que provengan de nuestros usuarios.
