Knockout (marco de desarrollo web)

Knockout es una implementación independiente en JavaScript del patrón modelo-vista-modelo de vista (MVVM) con plantillas. Por lo tanto, los principios subyacentes son:

una clara separación entre los datos del dominio, los componentes de la vista y los datos que se van a mostrar.
la presencia de una capa de código especializado claramente definida para gestionar las relaciones entre los componentes de la vista

Este último aprovecha las funciones nativas de gestión de eventos del lenguaje JavaScript.

Estas características agilizan y simplifican la especificación de relaciones complejas entre los componentes de la vista, lo que a su vez hace que la pantalla sea más receptiva y la experiencia del usuario más enriquecedora.

Knockout fue desarrollado y es mantenido como un proyecto de código abierto por Steve Sanderson.

Características

Knockout incluye las siguientes características:

Enlaces declarativos
Actualización automática de la interfaz de usuario (cuando cambia el estado del modelo de datos, la interfaz de usuario se actualiza automáticamente).
Sistema de plantillas con seguimiento de dependencias (incluye un motor de plantillas dedicado, pero se pueden utilizar otros motores de plantillas).

Ejemplos

1. En este ejemplo, dos cuadros de texto están vinculados a variables observables en un modelo de datos. La visualización del "nombre completo" está vinculada a una variable observable dependiente, cuyo valor se calcula en función de las variables observables. Cuando se edita cualquiera de los cuadros de texto, la visualización del "nombre completo" se actualiza automáticamente, sin necesidad de gestionar eventos explícitamente.

ViewModel (JavaScript)

function ViewModel () { this . firstName = ko . observable ( "" ); this . lastName = ko . observable ( "" );this.fullName = ko.computer ( function ( ) { return this.firstName ( ) + " " + this.lastName ( ) ; } , this ) ; }ko . applyBindings ( nuevo ViewModel ());

2. Creación de manejadores de enlace personalizados en KnockoutJS

Utilice el objeto ko.bindingHandlers para especificar el nombre de su enlace personalizado y cree una función de inicialización o actualización al crear un controlador de enlace personalizado. La función de inicialización se llama cuando el enlace se ha aplicado a un elemento, ideal para una inicialización única. Cada vez que cambia el observable vinculado, se llama a una función de actualización que le permite reaccionar a los datos cambiantes.

Aquí tienes un ejemplo sencillo de un controlador de enlace personalizado que aplica un selector de fechas de jQuery UI a un elemento de entrada:

Controlador de enlace personalizado

ko . bindingHandlers . datepicker = { init : function ( element , valueAccessor ) { $ ( element ). datepicker ({ onSelect : function ( date ) { var observable = valueAccessor (); observable ( date ); } }); }, update : function ( element , valueAccessor ) { var value = ko . unwrap ( valueAccessor ()); $ ( element ). datepicker ( "setDate" , value ); } };

Referencias

Papa, John (febrero de 2012). "Primeros pasos con Knockout" . Revista MSDN . Consultado el 9 de marzo de 2012 .
Papa, John (marzo de 2012). "Enlaces integrados de Knockout para HTML y JavaScript" . Revista MSDN . Consultado el 9 de marzo de 2012 .

"Dominando Knockoutjs: Una guía completa para aplicaciones web dinámicas" . Febrero de 2024. Consultado el 26 de febrero de 2024 .

Enlaces externos

Sitio web oficial