Share
Crear interfaces de usuario basadas en datos es uno de los trabajos más complejos de un desarrollador web. Requiere una administración cuidadosa entre la interfaz y sus datos subyacentes. Por ejemplo, considere una interfaz de carro de compras simple para un sitio web de comercio electrónico. Cuando el usuario elimina un artículo del carrito de la compra, debe eliminar el elemento del conjunto de datos subyacente, eliminar el elemento asociado de la página HTML del carrito de la compra y actualizar el precio total. Para todas las aplicaciones, excepto para las más triviales, descubrir qué elementos HTML se basan en una determinada pieza de datos es un esfuerzo propenso a errores.
Figura 1: seguimiento manual de dependencias entre elementos HTML y sus datos subyacentes La biblioteca de JavaScript de Knockout.js proporciona una forma más limpia de administrar este tipo de interfaces complejas basadas en datos. En lugar de rastrear manualmente qué secciones de la página HTML dependen de los datos afectados, Knockout.js le permite crear una conexión directa entre los datos subyacentes y su presentación. Después de vincular un elemento HTML con un objeto de datos en particular, cualquier cambio en ese objeto es automáticamente reflejado en el DOM.
Figura 2: seguimiento automático de dependencias usando Knockout.js Esto le permite centrarse en los datos detrás de su aplicación. Después de configurar sus plantillas HTML, puede trabajar exclusivamente con objetos de datos de JavaScript. Con Knockout.js, todo lo que tiene que hacer para eliminar un artículo del carrito de compras es eliminarlo de la matriz de JavaScript que representa los elementos del carrito de compras del usuario. Los elementos HTML correspondientes se eliminarán automáticamente de la página y el precio total se volverá a calcular..
Dicho de otra manera, Knockout.js te permite diseñar una pantalla de actualización automática para tus objetos JavaScript.
Pero, eso no es todo lo que puede hacer Knockout. Además del seguimiento automático de dependencias, cuenta con varias características de soporte para el rápido desarrollo de interfaces de usuario sensibles ...
Knockout.js es un lado del cliente Biblioteca escrita completamente en JavaScript. Esto lo hace compatible con prácticamente cualquier software del lado del servidor, desde ASP.NET hasta PHP, Django, Ruby on Rails e incluso marcos web personalizados..
Cuando se trata del front-end, Knockout.js conecta el modelo de datos subyacente a los elementos HTML agregando un único atributo HTML. Esto significa que puede integrarse en un proyecto existente con cambios mínimos en su HTML, CSS y otras bibliotecas de JavaScript.
Aunque Knockout.js incluye casi dos docenas de enlaces para definir cómo se muestran los datos, es posible que todavía necesite un comportamiento específico de la aplicación (por ejemplo, un widget de calificación de estrellas para reseñas de películas enviadas por el usuario). Afortunadamente, Knockout.js facilita la adición de sus propios enlaces, lo que le da un control completo sobre cómo se transforman sus datos en HTML. Y, dado que estos enlaces personalizados están integrados en el lenguaje de creación de plantillas, es trivial reutilizar widgets en otras partes de su aplicación.
Figura 3: Reutilización de un enlace personalizado en varios componentes de la interfaz de usuario Knockout.js incluye varias funciones de utilidad, incluidos filtros de matriz, análisis JSON e incluso una forma genérica de asignar datos del servidor a una vista HTML. Estas utilidades hacen posible convertir grandes cantidades de datos en una interfaz de usuario dinámica con solo unas pocas líneas de código.
Knockout.js es no destinado a ser un reemplazo de jQuery, Prototype o MooTools. No intenta proporcionar animación, manejo de eventos genéricos o funcionalidad AJAX (sin embargo, Knockout.js puede analizar gramaticalmente los datos recibidos de una llamada AJAX). Knockout.js se enfoca únicamente en el diseño de interfaces de usuario escalables e impulsadas por datos. La forma en que se obtienen los datos subyacentes depende completamente de usted..
Figura 4: Knockout.js que complementa una pila de aplicaciones web completa Este alto nivel de especialización hace que Knockout.js sea compatible con cualquier otra tecnología del lado del cliente y del servidor, pero también significa que Knockout.js a menudo requiere la cooperación de un marco de JavaScript más completo. En este sentido, Knockout.js es más de un suplemento a una pila de aplicaciones web tradicional, en lugar de una parte integral de ella.
Cuando estés listo, continúa con la lección uno!
Esta lección representa un capítulo de Nocaut sucintamente, un libro electrónico gratuito del equipo en Syncfusion.
Accentsconagua