Saltar al contenido

Todo Sobre los Formularios Knockout.js

5 junio, 2019

Hoy queremos hablarte de los formularios Knockout.js; ya que pueden ser utilizados tanto en aplicaciones como en sitios web; facilitando el suministro de datos necesarios, de una forma más fácil de procesar.

Knockout.js hace posible que diversos elementos se unan y complementen, a fin de realizar un formulario factible y el cual se pueda validar.

¿Qué Necesitas para Implementar un Knockout.js?

Para llevar a cabo un knockout.js, debes contar con lo siguiente:

  • Knockout.js en tu sistema.
  • Conexión a Internet.
  • También se necesita autorización para crear y acceder a ciertos archivos y aplicaciones.
  • Necesitarás un editor de textos.
  • Y contar con un servidor web, que sea tipo Apache o Nginx.

Enlaces de Datos Compatibles con Knockout.js

Es primordial definir cuáles son los enlaces de datos o Data-bindings, con los que funciona Knockout.js; esto a fin de tener bien definido el ámbito de los posibles resultados para la aplicación o para la página web, con la que se está trabajando.

  • Data-bind Value: Expresa el valor de los elementos utilizados; una vez que cambie.
  • Data-bind TextInput: Es bastante semejante al value; la diferencia es que expresa el valor durante la interacción; es decir el proceso es continuo, mientras se realiza el proceso.
  • Data-bind Checked: Permite comprobar el uso de los elementos.
  • Data-bind Options: Este binding permite llenar un elemento a través de las opciones que ofrece el formulario; funciona ideal para trabajar en base a varias opciones.
  • Data-bind SelectedOptions: Permite es uso de varias opciones al mismo tiempo.
  • Data-bind Enable/disable: Como su nombre lo indica a través de estos, podemos habilitar o inhabilitar cualquier elemento del formulario; para así utilizar solo los necesarios.

Eventos en los Formularios

Poder manejar eventos, es necesario cuando se trabaja con formularios; debido a que nos permiten ejecutar acciones necesarias en procesos particulares; o en general en nuestro HTML. A continuación hablaremos de los diferentes eventos que se pueden llevar a cabo con los formularios:

Evento Submit

Su activación ocurre al momento de enviar el formulario hacia el servidor; a través del método input submit u otro tipo de método.

Evento clic

Tal como nos hace pensar su nombre, es la acción de realizar un clic en los elementos participantes en el formulario.

Evento hasFocus

Este evento hace referencia a la selección que realiza un usuario de algún elemento, mientras éste elemento ya está siendo utilizado.

Ejemplos Prácticos de Knockout.js

En resumen podemos llevar a la práctica, tanto los enlaces de datos, como los diferentes eventos, en los formularios Knockout.js. Al iniciar la creación del formulario, se contará con una lista; también contaremos con una imagen a modo de demostración, para tener una referencia de las acciones realizadas.

A fin de llevar a cabo el formulario Knockout.js; es necesario contar con la ayuda de la librería jQuery; con esta librería obtendremos efectos necesarios para la aplicación o el sitio web que estamos trabajando. Si no tienes esta jQuery, puedes descargarla para tenerla disponible al momento de necesitarla. Ahora te mostraremos el código necesario:

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

Con estos códigos, se ha creado una lista que cuenta con descripción e imagen; el acceso a estos datos, se hará posible con la aplicación elegida; y por último, la imagen se podrá agregar a través de un selector disponible en jQuery; con eso podremos asegurarnos que tanto los datos como la imagen sean iguales en el DOM.

En lo correspondiente al HTML, ya se ha realizado la lista, con sus elementos correspondientes; solo resta asignar la función que tiene que ejecutar en el evento correspondiente.

Share via