Inicio rápido: enlazar datos y estilos (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Puedes enlazar datos y estilos a elementos HTML mediante el enlace de la biblioteca de Windows para JavaScript. El enlace con WinJS es unidireccional de manera predeterminada, lo que significa que el elemento HTML se actualiza cuando cambian los valores de los datos y estilos, pero los datos no se actualizan cuando cambia el elemento HTML. Este tema de inicio rápido muestra el tipo de enlace más básico, que es un enlace declarativo a un objeto sencillo que solo contiene datos. Para obtener información sobre tipos de enlace más avanzados, consulta los temas sobre cómo enlazar un objeto complejo y cómo usar plantillas para enlazar datos.

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener instrucciones para crear tu primera aplicación, consulta Crear la primera aplicación con JavaScript.

Configurar un proyecto de enlace

Sigue estos pasos para configurar un proyecto para usar el enlace.

Crea una aplicación de Windows en tiempo de ejecución vacía con JavaScript y asígnale el nombre BindingApp.
En default.html, agrega un elemento DIV para el enlace y asígnale el identificador "basicBinding" y el texto interno Welcome, como se muestra aquí.
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

Enlazar datos

Puedes enlazar cualquier tipo de datos a un elemento HTML pero, para ilustrarlo mejor, simplemente configuraremos un objeto person que tenga un campo para el nombre de pila.

Advertencia No trates de enlazar datos al identificador de un elemento HTML.

En default.js, agrega la siguiente línea de código dentro de la función anónima invocada inmediatamente, justo después de la directiva use strict.
```
(function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();
```

En el elemento DIV, agrega un elemento SPAN que tenga acceso al campo person.name.

<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

Debes llamar a WinJS.Binding.processAll para que aparezca el nombre. WinJS.Binding.processAll empieza a buscar el atributo data-win-bind en el elemento especificado y busca todos los descendientes del elemento. En el segundo parámetro de WinJS.Binding.processAll se proporciona el contexto de datos que hay que insertar en el elemento especificado. Agrega el código siguiente dentro del controlador de eventos app.onactivated, en default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
Cuando compiles y depures el proyecto, deberías ver esto:

Welcome, Fran
Ten en cuenta el siguiente fragmento de código:
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- El sistema de enlace de WinJS usa una capa observable para propagar las notificaciones de cambios.
- Al pasar un objeto de datos en processAll como el contexto de datos, se encapsula en una llamada a WinJS.Binding.as que crea un proxy o se encuentra con uno observable ya creado para ese objeto.
- Todas las "escrituras" (es decir, conjuntos de propiedades) para las que desees desencadenar notificaciones deben producirse a través de esta capa proxy; puedes encontrar el proxy observable a través de WinJS.Binding.as más tarde.
- A menudo lo más sencillo que puedes hacer es simplemente usar ese proxy observable como objeto para leer y escribir datos.
- El enlace único se produce cuando se usa un inicializador de enlace para reemplazar el comportamiento predeterminado (por ejemplo, WinJS.Binding.oneTime) o intentar enlazar objetos que son no extensibles (como objetos congelados o proyectados por WinRT).
Para demostrar lo que ocurre cuando cambian los datos subyacentes, usaremos un botón para simular la obtención de datos de un proceso distinto o de un almacén de datos interno. Agrega un elemento BOTÓN a default.html, debajo del elemento DIV.
```
<button id="btnGetName">Get name</button>
```

Agrega un método ficticio que simule la obtención de datos. En este caso, obtendremos el nombre de una matriz mediante un índice aleatorio. En default.js, usa el código siguiente al controlador de eventos app.onactivated que controla el evento de clic del botón.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

Para probar este código, genera y depura la aplicación. Deberías ver un nombre distinto cada vez que hagas clic en el botón Get name.

Enlazar un estilo

Ahora enlazaremos el color de fondo del elemento SPAN.

En default.html, agrega un valor style.background al atributo data-win-bind y establece su enlace al campo de color del objeto Person.

<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>

En default.js, agrega un campo de color al objeto Person.

Sugerencia El lado izquierdo de una expresión del enlace es cualquier propiedad de un elemento y sus subpropiedades con sintaxis JavaScript (que se usarían para asignarla mediante programación).
```
var person = { name: "Fran", color: "red" };
```

También en default.js, en el controlador de eventos app.onactivated, agrega una segunda matriz de colores y cambia la función getName para que actualice el color del nombre.

var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

Recuerda que debes cambiar la llamada a getName en el controlador de eventos de clic del botón.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

Cuando compiles y depures la aplicación, deberías ver que al hacer clic en el botón Get name se actualizan tanto el nombre como el color del nombre.

Resumen y siguientes pasos

En este tema de inicio rápido, has visto cómo enlazar un objeto JavaScript sencillo a un intervalo HTML.

Si quieres saber cómo enlazar objetos más complejos, consulta el tema sobre cómo enlazar un objeto complejo. Si quieres usar una plantilla para enlazar varios objetos, consulta el tema sobre cómo usar plantillas para enlazar objetos.

Compartir a través de