Templates y Binding de datos (III) – El código JavaScript

 
Continuaremos con los métodos de la página groupedItemsPage.html que habíamos empezado a ver dos artículos antes. Este artículo muestra los cambios más recientes realizados como parte del lanzamiento de Windows Release Review y Visual Studio 2012.

Como ya explicábamos en el anterior artículo, este método se invoca siempre y cuando el viewState de la página cambia. Su código es el siguiente:

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
/// <param name="viewState"
value="Windows.UI.ViewManagement.ApplicationViewState" />
/// <param name="lastViewState"
value="Windows.UI.ViewManagement.ApplicationViewState" />

var listView = element.querySelector(".groupeditemslist").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState === appViewState.snapped)
{
var handler = function (e) {
listView.removeEventListener("contentanimating", handler, false);
e.preventDefault();
}
listView.addEventListener("contentanimating", handler, false);
this.initializeLayout(listView, viewState);
}
}
}

El método es, en este caso, sencillo: si el anterior estado o el nuevo es snapped, desactivamos la animación del control de lista. Además, se está invocando a initializeLayout para hacer el setup inicial de la vista. Veamos su código:

// This function updates the ListView with new layouts
initializeLayout: function (listView, viewState) {
/// <param name="listView" value="WinJS.UI.ListView.prototype" />

if (viewState === appViewState.snapped) {
listView.itemDataSource = Data.groups.dataSource;
listView.groupDataSource = null;
listView.layout = new ui.ListLayout();
} else {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
}

En este método estamos tomando un elemento de la vista mediante el método querySelector y aplicándole cierta configuración en sus propiedades. Sin embargo, en este caso dicha

configuración dependerá de appViewState.snapped. Esta variable se corresponde con Windows.UI.ViewManagement.ApplicationViewState y nos servirá para saber en qué estado se encuentra la vista. Para el estado snapped, se ejecutarán estas líneas.

Estas opciones, en primer lugar, indican que el tipo de layout a aplicar al control es una lista, tal como vemos en la imagen. Se cargarán como elementos los contenidos de Data.groups.dataSource, que veremos en el siguiente artículo más en profundidad. Al tratarse de una vista simplificada, no existirá un agrupamiento de estos elementos, de ahí el valor null en groupDataSource.

En cambio en la vista normal, las líneas que se ejecutarían para configurar el control serían estas otras:

} else {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
}

En estas, en cambio, se toman los elementos Data.items.dataSource para cargarlos en la lista y se asignará una fuente de agrupación, precisamente la misma propiedad Data.groups.dataSource que estábamos usando como fuente principal de datos en la vista snapped. Por último y muy importante, el layout del control no es una lista sino un grid, tal como podíamos verlo en la primera imagen del artículo.

Método ItemInvoked

Este método hemos visto que se enlazaba con el evento oniteminvoked del ListView en el método Ready. Su código podemos verlo a continuación:

itemInvoked: function (args) {
if (appView.value === appViewState.snapped) {
// If the page is snapped, the user invoked a group.
var group = Data.groups.getAt(args.detail.itemIndex);
nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey:
group.key });
} else {
// If the page is not snapped, the user invoked an item.
var item = Data.items.getAt(args.detail.itemIndex);
nav.navigate("/pages/itemDetail/itemDetail.html", { item:
Data.getItemReference(item) });
}
},

Su código depende, de nuevo, del estado de la vista de la aplicación:

• Si la aplicación está en estado spanned, el método recuperará el grupo sobre el que se ha pulsado y redirigirá a la página groupDetail.html, encargada de mostrar detalles de cada grupo.
• Si la aplicación está en cualquier otro estado, el método recuperará no el grupo, sino el ítem concreto sobre el que se ha pulsado. En este caso la redirección se hará a itemDetail.html, que mostrará la información completa de dicho ítem.

Conclusiones

Si en los dos artículos anteriores nos centramos en la vista, en este lo hemos hecho en el código JavaScript que toda página va a necesitar definir y que va a participar en el proceso de binding de datos. En el próximo completaremos esta parte del desarrollo de Aplicaciones Metro mostrando cómo se define el modelo de datos y conectando los tres puntos: Modelo, Vista y Controlador.

Bibliografía

Centro de Desarrollo de Windows (español)