Guida introduttiva: Associazione di dati e stili (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

È possibile associare dati e stili a elementi HTML usando l'associazione della libreria Windows per JavaScript. L'associazione con WinJS è, per impostazione predefinita, unidirezionale, ovvero l'elemento HTML viene aggiornato quando cambiano i valori relativi a dati e stile, mentre i dati non vengono aggiornati quando cambia l'elemento HTML. Questa guida introduttiva illustra il tipo di associazione più basilare, ovvero un'associazione dichiarativa a un oggetto semplice che contiene solo dati. Per informazioni su tipi più avanzati di associazione, vedi Come associare un oggetto complesso e Come usare modelli per associare dati.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in JavaScript. Per istruzioni sulla creazione della tua prima app, vedi l'argomento relativo alla creazione della prima app in JavaScript.

Impostazione di un progetto di associazione

Per impostare un progetto che usa l'associazione, completa questi passaggi.

Crea una nuova app di Windows Runtime vuota usando JavaScript e assegnale il nome BindingApp.
In default.html aggiungi un elemento DIV per l'associazione e abbinalo a un ID "basicBinding" e a un testo interno Welcome, come illustrato qui.
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

Associazione ai dati

Puoi associare qualsiasi tipo di dati a un elemento HTML, ma a fini di illustrazione verrà impostato solo un oggetto person che contiene un campo per il nome.

Avviso Non tentare di associare i dati all'ID di un elemento HTML.

In default.js aggiungi la riga di codice seguente nella funzione anonima con richiamo immediato, subito dopo la direttiva use strict.

(function () {
    "use strict";

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

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

All'interno dell'elemento DIV aggiungi un elemento SPAN che accede al campo person.name.

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

Devi chiamare WinJS.Binding.processAll per visualizzare il nome. WinJS.Binding.processAll inizia a cercare l'attributo data-win-bind nell'elemento specificato, quindi esegue la ricerca in tutti i discendenti di tale elemento. Il secondo parametro di WinJS.Binding.processAll fornisce il contesto di dati da inserire nell'elemento specificato. Aggiungi il codice seguente al gestore eventi app.onactivated in default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
Quando compili ed esegui il debug del progetto, dovresti vedere quanto segue:

Welcome, Fran
Considera il frammento di codice seguente:
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- Il sistema di binding WinJS usa un livello osservabile per propagare le notifiche di modifica.
- Quando passi un oggetto dati in processAll come contesto dei dati, ne viene eseguito il wrapping in una chiamata a WinJS.Binding.as che crea un proxy osservabile per tale oggetto o si connette a uno già creato.
- Tutte le "scritture" (ovvero le impostazioni di proprietà) per cui vuoi generare notifiche devono avvenire attraverso questo livello proxy. Puoi connetterti al proxy osservabile tramite WinJS.Binding.as in seguito.
- Spesso, la soluzione più facile consiste semplicemente nell'usare tale proxy osservabile come oggetto per la lettura e scrittura di dati.
- Il binding una tantum si verifica quando si usa un inizializzatore di binding per ignorare il comportamento predefinito (ad esempio WinJS.Binding.oneTime) o si tenta il binding con oggetti non estendibili (ad esempio, oggetti bloccati o oggetti WinRT proiettati).
Per dimostrare cosa accade quando i dati sottostanti vengono modificati, useremo un pulsante per simulare il recupero dei dati da un altro processo o da un archivio dati interno. Aggiungi un elemento BUTTON in default.html, sotto l'elemento DIV.
```
<button id="btnGetName">Get name</button>
```

Aggiungi un metodo fittizio che simuli il recupero dei dati. In questo caso, si otterrà il nome da una matrice usando un indice casuale. In default.js aggiungi il codice seguente al gestore eventi app.onactivated che gestisce l'evento clic del pulsante.

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;
}

Per testare il codice, compila ed esegui il debug dell'applicazione. Dovresti vedere un nome diverso ogni volta che fai clic sul pulsante Recupera nome.

Associazione di uno stile

A questo punto assoceremo il colore di sfondo dell'elemento SPAN.

In default.html aggiungi un valore style.background all'attributo data-win-bind e impostane l'associazione al campo color dell'oggetto person.
```
<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>
```
In default.js aggiungi un campo color all'oggetto person.

Suggerimento La parte sinistra di un'espressione di associazione è costituita dalla proprietà di un elemento e dalle relative proprietà secondarie con la sintassi JavaScript (che useresti per l'assegnazione a livello di programmazione).
```
var person = { name: "Fran", color: "red" };
```

Nel gestore eventi app.onactivated di default.js aggiungi una seconda matrice di colori e modifica la funzione getName in modo che aggiorni il colore del nome.

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()];
    }

Ricorda di modificare la chiamata getName nel gestore dell'evento clic per il pulsante.

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

Quando compili ed esegui il debug dell'app, dovresti notare che facendo clic sul pulsante Recupera nome vengono aggiornati sia il nome sia il colore del nome.

Riepilogo e passaggi successivi

In questa guida introduttiva, ha appreso come associare un semplice oggetto JavaScript a un elemento span HTML.

Per ulteriori informazioni su come associare oggetti più complessi, vedi Come associare un oggetto complesso. Se desideri usare un modello per associare più oggetti, vedi Come usare modelli per associare dati.

Condividi tramite