Panorama conceptual

Knockout.js utiliza un patrón de diseño Model-View-ViewModel (MVVM), que es una variante del patrón clásico de Model-View-Controller (MVC). Como en el patrón MVC, el modelo es su información almacenada, y la ver Es la representación visual de esos datos. Pero, en lugar de un controlador, Knockout.js utiliza un ViewModel Como intermediario entre el modelo y la vista..

El ViewModel es una representación de JavaScript de los datos del modelo, junto con las funciones asociadas para manipular los datos. Knockout.js crea una conexión directa entre ViewModel y la vista, que es la forma en que puede detectar los cambios en los datos subyacentes y actualizar automáticamente los aspectos relevantes de la interfaz de usuario..

Figura 5: El patrón de diseño Modelo-Vista-VistaModelo

Los componentes MVVM de nuestro ejemplo de carrito de compra se enumeran a continuación:

Modelo: El contenido del carro de la compra de un usuario almacenado en una base de datos, cookie o algún otro almacenamiento persistente. A Knockout.js no le importa cómo se almacenan sus datos: depende de usted comunicarse entre el almacenamiento de su modelo y Knockout.js. Por lo general, guardará y cargará los datos de su modelo a través de una llamada AJAX.
Ver: La página de carrito de compras HTML / CSS que se muestra al usuario. Después de conectar la vista a ViewModel, mostrará automáticamente los elementos nuevos, eliminados y actualizados cuando cambie ViewModel..
ViewModel: Un objeto de JavaScript puro que representa el carro de la compra, que incluye una lista de artículos y métodos de guardar / cargar para interactuar con el modelo. Después de conectar su vista HTML con ViewModel, su aplicación solo debe preocuparse por la manipulación de este objeto (Knockout.js se hará cargo de la vista).

Observables

Knockout.js utiliza observables para rastrear las propiedades de un ViewModel. Conceptualmente, los observables actúan como variables de JavaScript normales, pero permiten que Knockout.js observar Sus cambios y actualizan automáticamente las partes relevantes de la vista..

Figura 6: Uso de observables para exponer las propiedades de ViewModel

Fijaciones

Solo observables exponer Las propiedades de un ViewModel. Para conectar un componente de interfaz de usuario en la vista a un observable particular, debe enlazar un elemento HTML para ello. Después de vincular un elemento a un observable, Knockout.js está listo para mostrar los cambios en ViewModel automáticamente.

Figura 7: Enlace de un componente de la interfaz de usuario a una propiedad observable

Knockout.js incluye varios enlaces incorporados que determinan cómo aparece el observable en la interfaz de usuario. El tipo de enlace más común es simplemente mostrar el valor de la propiedad observada, pero también es posible cambiar su apariencia bajo ciertas condiciones, o llamar a un método de ViewModel cuando el usuario hace clic en el elemento. Todos estos casos de uso se cubrirán en las próximas lecciones..

Resumen

El patrón de diseño Model-View-ViewModel, los elementos observables y los enlaces proporcionan la base para la biblioteca Knockout.js. Una vez que entienda estos conceptos, aprender Knockout.js es simplemente una cuestión de descubrir cómo acceder a los observables y manipularlos a través de los diversos enlaces integrados. En la siguiente lección, veremos por primera vez estos conceptos construyendo una aplicación simple de "¡Hola, mundo!".

Esta lección representa un capítulo de Nocaut sucintamente, un libro electrónico gratuito del equipo en Syncfusion.

Código