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.