Este post forma parte de una serie de cuatro:

• Tutorial jQuery Mobile + Knockout (I): Sentando las bases
• Tutorial jQuery Mobile + Knockout (II): Creando las vistas con jQuery Mobile
• Tutorial jQuery Mobile + Knockout (III): Definiendo el ViewModel con Knockout
• Tutorial jQuery Mobile + Knockout (y IV): Configurando el Data Binding

Sentando las bases

Tras la buena acogida que tuvo el tutorial de nodejs y express, me he decidido a preparar otro tutorial que sirva de introducción para un par de librerías con las que he estado jugando últimamente.

Igual que en el anterior tutorial, quiero dejar claro que esto es sólo una pequeña introducción a dos librerías que me parecen útiles. No se trata de un catálogo de buenas prácticas y habrá muchos puntos que puedan (y deban) ser mejorados.

En este caso vamos a crear una pequeña aplicación web para dispositivos móviles usando jQuery Mobile y Knockout. Como creo que es importante conocer las bases para poder entender lo que estamos haciendo, antes de empezar a implementar nada vamos a presentar a nuestros nuevos amigos.

jQuery Mobile

jQuery Mobile es un framework que nos permite crear aplicaciones para dispositivos móviles. Por tanto, está optimizado para su uso con pantallas de pequeño tamaño e interfaces táctiles. Se encarga de ajustar el interfaz de usuario de los controles estándar html para que sean más atractivos y manejables en un entorno móvil.

Se ejecuta por completo en el lado cliente, en este caso, el browser del dispositivo. Para emplearlo, debemos añadir lo siguiente a nuestra página web:

	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>

Podemos usar la versión descargada o enlazar directamente a una versión online, tal y como explican en su página de descarga.

jQuery Mobile se basa en la asignación de roles a los distintos elementos html para atribuirles determinadas funciones dentro de la aplicación. A partir de estos roles, se ajusta el aspecto del elemento. Para asignar los roles a los elementos se usa el atributo data-role:

	<div id="home" data-role="page"></div>

Una aplicación desarrollada con jQuery Mobile se estructura alrededor del concepto de página. Una página no es más que un div que tiene asignado el rol page, como en el ejemplo anterior. En un único documento html podremos tener varias páginas simplemente añadiendo varios divs con el atributo data-role="page", y jQueryMobile se encargará de mostrar en cada momento únicamente el div correspondiente a la página que esté activa.

Además del rol usado para marcar las páginas, existen otros roles muy útiles como header, footer, etc. que permiten representar otros elementos dentro de la página, o listview, button, etc. que se usan para crear controles con los que el usuario puede interactuar.

Si quieres conocer en profundidad las opciones que ofrece jQuery Mobile, te recomiendo que consultes su documentación.

Knockout

Knockout es una librería diseñada para aplicar cómodamente el patrón MVVM en aplicaciones javascript. Al igual que jQuery Mobile se ejecuta por completo en el browser por lo que deberemos incluirla en el código de nuestras páginas:

	<script type="text/javascript" src="js/knockout-2.0.0.js"></script>

Para poder trabajar con Knockout es fundamental conocer el patrón Model-View-ViewModel. Resumiéndolo (mucho) podríamos decir que se basa en organizar la aplicación en torno a 3 conceptos:

• Model. Es el modelo completo de la aplicación, donde reside la lógica de negocio y todas esas cosas importantes. Knockout no se mete en esta parte y puedes implementarla como quieras. Lo más habitual es que resida en un servidor y la aplicación se comunique con él a través de AJAX.
• View. La vista, dedicada únicamente a mostrar información. No contiene ningún tipo de lógica, ni siquiera lógica relacionada con el interfaz de usuario, porque para eso está la última parte del trío.
• ViewModel. El modelo de presentación, que se encarga de adaptar el modelo de la aplicación a las necesidades de la vista y contiene además toda la lógica relacionada con el interfaz de usuario, como por ejemplo cuándo se debe habilitar un control o qué hay que hacer cuando se pulsa un botón.

Knockout nos ofrece una manera muy sencilla de enlazar View y ViewModel a través de data binding. Este data binding se hace de forma declarativa usando atributos data-bind:

    <h1 data-bind="text: customerName"></h1>

Las posibilidades que ofrece Knockout para realizar el data binding son de lo más variado y podéis consultarlas en la documentación de Knockout.

Para que funcione esto del data binding es fundamental poder detectar los cambios en los valores de los controles para propagarlos al ViewModel, pero también es necesario poder detectar los cambios en el ViewModel para propagarlos a la vista. En este aspecto Knockout cuenta con su propia implementación del patrón observer, a través de funciones como ko.observable.

¿Cuándo empezamos?

En el siguiente post veremos cómo es la aplicación de ejemplo que vamos a hacer en este tutorial y prepararemos la estructura de páginas de jQuery Mobile que vamos a tener.

Este tutorial continúa con: Creando las vistas con jQuery Mobile.