El Data Binding es una técnica que nos va a permitir separar responsabilidades de la aplicación en distintas capas o clases. En la capa de modelo vamos a tener la información organizada en clases y propiedades. En la capa de presentación en HTML vamos a definir cómo mostrar la información, asociando a los elementos de la vista los nombres de las propiedades del modelo que queremos mostrar. Por último, tendremos una capa capaz de orquestar todo el proceso, poniendo en contacto la vista con su fuente de información. Esto recuerda bastante a un patrón MVC y en las Aplicaciones Metro va a ayudarnos a tener código más mantenible y reutilizable.
Si tomamos como ejemplo la plantilla de Grid y buscamos el fichero groupedItems.html, encontraremos este fragmento de HTML.
En Aplicaciones Metro con HTML/JS vamos a poder definir etiquetas como controles de la librería WinJS gracias al atributo data-win-control. En este caso estamos indicando que la etiqueta div es una plantilla aplicable a una lista para mostrar su información.
-
A su vez esta plantilla estará compuesta de una imagen y un div con dos textos. Tanto en la etiqueta como en dichos textos estamos utilizando el atributo data-win-bind para realizar un binding de datos. A esta propiedad le estamos asignado siempre una pareja de valores separados por un punto doble:
-
A la izquierda del punto doble indicaremos el atributo del control que queremos enlazar. Por ejemplo, en el caso de la imagen, estamos definiendo un valor para su atributo src.
-
A la derecha del punto indicaremos el nombre de la propiedad del modelo cuyo valor se asignará al control HTML, cuando se haga efectivo el binding de datos.
Para buscar el modelo que se va a aplicar en esta relación tendremos que abrir el fichero data.js. En él encontraremos este fragmento de código JS:
Con este fragmento estamos haciendo públicas ciertas variables y funciones, para que puedan ser accedidas desde otras partes de la aplicación, bajo el espacio de nombres Data. Si buscamos el origen de la variable groupedItems veremos que se trata de una colección cuyos elementos tienen valores para propiedades como background, title y subtitle, precisamente los nombres que se dieron en el fragmento de HTML de definición de la plantilla.
Por ultimo, faltaría el rol de controlador que conecte ambas partes, vista y modelo. Este rol lo va a ocultar el fichero JavaScript que cada página HTML va a tener asociado; en este caso se trataría de groupedItems.js. En este fichero, como parte de la función initializeLayout, vamos a encontrarnos este fragmento:
En él, tras recuperar una referencia a la lista, se estará conectando, finalmente, el control con su modelo de datos, en concreto al asignar valores a las propiedades itemDataSource y groupDataSource.
Con esto completaríamos el proceso de binding de datos. Recapitulando, en el modelo crearemos objetos que contengan valores para dichas propiedades, en la vista elegiremos las propiedades que queremos mostrar del modelo y en el controlador conectaremos instancias de controles de la vista con instancias del modelo de datos.
En Genbeta Dev | Programar aplicaciones Metro en Windows 8
<div class="nota">
Es especialista en metodologías ágiles y en estándares web relacionado con HTML5. Es miembro activo de la comunidad .NET a través de MADNUG y colabora con medios como DotNetMania, PC Actual o Desarrolloweb.com.
Puedes seguirle en Twitter: @javierholguera o en su blog: javierholguera.com
