Share
Esta lección está diseñada para ser una encuesta de alto nivel de los componentes principales de Knockout.js. Al implementar una aplicación de muestra concreta, veremos cómo interactúan ViewModel, view, observables y enlaces de Knockout para crear una interfaz de usuario dinámica..
Primero, crearemos una página HTML simple para guardar todo nuestro código, luego definiremos un objeto ViewModel, expondremos algunas propiedades e incluso agregaremos un enlace interactivo para que podamos reaccionar a los clics de los usuarios..
Antes de comenzar a escribir cualquier código, descargue la última copia de Knockout.js de la página de descargas en GitHub.com. A partir de este escrito, la versión más reciente es 2.1.0. Después de eso, estamos listos para agregar la biblioteca a una página HTML.
Vamos a empezar con una página HTML estándar. En la misma carpeta que su biblioteca Knockout.js, cree un nuevo archivo llamado index.html y agregue lo siguiente. Asegúrese de cambiar knockout-2.1.0.js al nombre de archivo de la biblioteca Knockout.js que descargó.
Código de ejemplo: item1.htm
Hola, Knockout.js
Carrito de compras de Bill
Esta es una página web básica de HTML 5 que incluye la biblioteca Knockout.js en la parte inferior de ; aunque, como cualquier script externo, puede incluirlo en cualquier lugar que desee (dentro de Es la otra opción común). La hoja de estilo style.css no es realmente necesaria para ninguno de los ejemplos de esta serie, pero los hará mucho más fáciles para los ojos. Se puede encontrar en el Apéndice A, o se puede descargar desde https://bitbucket.org/syncfusion/knockoutjs_succinctly. Si abre la página en un navegador web, debería ver lo siguiente:
Figura 8: Página web básica Como todavía no estamos trabajando con datos persistentes, no tenemos un modelo con el que trabajar. En su lugar, vamos a saltar a la derecha a ViewModel. Hasta la Lección 7:, realmente estamos usando un patrón View-ViewModel.
Figura 9: Enfoque en la vista y ViewModel por el momento Recuerde, un ViewModel es una representación pura de JavaScript de los datos de su modelo. Para comenzar, solo usaremos un objeto JavaScript nativo como nuestro ViewModel. Debajo de la
Esto crea una "persona" llamada John Smith, y el ko.applyBindings () método le dice a Knockout.js que use el objeto como ViewModel para la página.
Por supuesto, si vuelve a cargar la página, seguirá mostrando "Carro de la compra de Bill". Para que Knockout.js actualice la vista basada en el ViewModel, necesitamos enlazar un elemento HTML para el personViewModel objeto.
Knockout.js utiliza un especial enlace de datos atributo para enlazar elementos HTML al ViewModel. Reemplazar Bill en el
etiqueta con un vacío elemento, como sigue:
carrito de compras
El valor del atributo de enlace de datos le dice a Knockout.js qué mostrar en el elemento. En este caso, la texto el enlace le dice a Knockout.js que muestre la propiedad firstName del ViewModel. Ahora, cuando vuelva a cargar la página, Knockout.js reemplazará el contenido del con personViewModel.firstName. Como resultado, debería ver "Carrito de compras de John" en su navegador:
Figura 10: Captura de pantalla de nuestro primer componente de vista enlazada De manera similar, si cambia el atributo de enlace de datos a texto: lastName, mostrará "Carrito de compras de Smith". Como puede ver, vincular un elemento es simplemente definir una plantilla HTML para su ViewModel.
Por lo tanto, tenemos un ViewModel que puede mostrarse en un elemento HTML, pero observe lo que sucede cuando intentamos cambiar la propiedad. Despues de llamar ko.applyBindings (), asigne un nuevo valor a personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js no lo hará actualiza automáticamente la vista y la página seguirá leyendo "Carrito de compras de John". Esto se debe a que no hemos expuesto el nombre de pila propiedad de Knockout.js. Cualquier propiedad que desee que Knockout.js rastree debe ser observable. Podemos hacer que las propiedades de nuestro ViewModel sean observables cambiando personViewModel a lo siguiente:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), lastName: ko.observable ("Smith"); En lugar de asignar directamente valores a nombre de pila y apellido, usamos ko.observable () para agregar las propiedades al rastreador de dependencias automático de Knockout.js. Cuando cambiamos la propiedad FirstName, Knockout.js debería actualizar el elemento HTML para que coincida:
ko.applyBindings (personViewModel); personViewModel.firstName ("Ryan"); Probablemente has notado que los observables son en realidad funciones, no variables. Para obtener el valor de un observable, llámelo sin ningún argumento, y para establecer el valor, pase el valor como un argumento. Este comportamiento se resume a continuación:
obj.firstName () en lugar de obj.firstName obj.firstName ("Mary") en lugar de obj.firstName = "Mary" Adaptarse a estos nuevos accesores puede ser algo contraintuitivo para los principiantes de Knockout.js. Tenga mucho cuidado de no asignar accidentalmente un valor a una propiedad observable con el = operador. Esto sobrescribirá lo observable, causando que Knockout.js deje de actualizar automáticamente la vista.
Nuestro genérico personViewModel El objeto y sus propiedades observables funcionan bien en este sencillo ejemplo, pero recuerde que ViewModels también puede definir métodos para interactuar con sus datos. Por esta razón, ViewModels a menudo se definen como clases personalizadas en lugar de objetos genéricos de JavaScript. Continuemos y reemplacemos personViewModel con un objeto definido por el usuario:
función PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); Esta es la forma canónica de definir un ViewModel y activar Knockout.js. Ahora, podemos agregar un método personalizado, así:
función PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("¡Intentando pagar!"); ; ; La combinación de datos y métodos en un solo objeto es una de las características definitorias del patrón MVVM. Proporciona una forma intuitiva de interactuar con los datos. Por ejemplo, cuando esté listo para salir, simplemente llame al revisa() Método en el ViewModel. Knockout.js incluso proporciona enlaces para hacer esto directamente desde la vista.
Nuestro último paso en esta lección será agregar un botón de pago para llamar al revisa() Método que acabamos de definir. Esta es una introducción muy breve a los enlaces interactivos de Knockout.js, pero proporciona algunas funciones útiles que necesitaremos en la próxima lección. Debajo de la
etiqueta, agregue el siguiente botón:
En lugar de un enlace de texto que muestra el valor de una propiedad, el hacer clic el enlace llama a un método cuando el usuario hace clic en el elemento. En nuestro caso, llama al método checkout () de nuestro ViewModel, y debería aparecer un mensaje de alerta emergente.
Figura 11: Mensaje de alerta creado después de hacer clic en el botón Pagar El conjunto completo de enlaces interactivos de Knockout.js se tratará en la Lección 6:.
Esta lección recorrió los aspectos centrales de Knockout.js. Como hemos visto, hay tres pasos para configurar una aplicación web basada en Knockout.js:
Puede pensar en vincular elementos de vista a propiedades observables como crear una plantilla HTML para un objeto JavaScript. Una vez configurada la plantilla, puede olvidarse completamente del HTML y centrarse únicamente en los datos de ViewModel detrás de la aplicación. Este es el punto entero de Knockout.js.
En la siguiente lección, exploraremos el poder real detrás del rastreador de dependencias automático de Knockout.js creando observables que se basan en otras propiedades, así como matrices observables para mantener listas de datos..
Esta lección representa un capítulo de Nocaut sucintamente, un libro electrónico gratuito del equipo en Syncfusion.
