Come associare un oggetto complesso (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 ]

In molti casi potrebbe essere utile che la tua app si associ a oggetti complessi, in particolare a oggetti che gestiscono processi non controllati dall'interfaccia utente dell'app. Questo argomento spiega come scrivere un'app che visualizza i dati appartenenti a un oggetto contenente un nome e un colore, in pratica riprende i concetti descritti nella Guida introduttiva: Associazione di dati e stili. In questo caso però l'oggetto stesso gestisce il processo di modifica, invece di rispondere a un pulsante che attiva la modifica.

Prerequisiti

La lettura dell'argomento Guida introduttiva: Associazione di dati e stili a elementi HTML potrà aiutarti a completare i passaggi dei questa procedura.

Istruzioni

Passaggio 1: Impostazione di un progetto per l'uso dell'associazione

Crea un'app di Windows Runtime vuota in JavaScript e assegnale il nome ObjectBinding.
In default.html aggiungi un elemento DIV per l'associazione e abbinalo a un ID "objectBinding", a un testo interno Welcome e a un elemento SPAN con ID "bindableSpan", come illustrato qui.
```
<body>
    <div id="objectBinding">
      Welcome
      <span id="bindableSpan"></span>
    </div>
</body>
```

Passaggio 2: Impostazione di un oggetto complesso

Definisci un oggetto Person che disponga dei campi nome e colore, di una matrice di nomi, di una matrice di nomi di colori e di un metodo privato per fornire un indice casuale per la matrice. Per la definizione di questo oggetto puoi utilizzare il metodo WinJS.Class.define. Aggiungi questo codice alla funzione anonima con richiamo immediato in default.js.


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        }
    });

})();

Aggiungi quindi alla definizione Person (il secondo argomento passato a WinJS.Class.define) due metodi pubblici che avviano e interrompono un processo per la modifica dei campi nome e colore ogni 500 millisecondi. La chiamata completa a WinJS.Class.define è illustrata qui sotto.


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        },

        // Starts the process that changes the name.
        start: function () {
            var that = this;
            if (this.timeout === null) {
                this.timeout = setInterval(function () { that._newName(); }, 500);
            }
        }, 

        // Stops the process that changes the name.
        stop: function () {
            if (this.timeout !== null) {
            clearInterval(this.timeout);
                this.timeout = null;
            }
        }
    });

})();

Passaggio 3: Associazione dell'oggetto all'HTML

In questo momento l'oggetto Person non è osservabile, cioè non genera notifiche quando cambia. Possiamo renderlo osservabile combinando l'oggetto Person e la funzionalità di associazione corretta. La funzione WinJS.Class.mix aggiunge all'oggetto Person la funzionalità dell'oggetto WinJS.Binding.mixin, che include un metodo bind, e la funzionalità della funzione WinJS.Binding.expandProperties, che crea le proprietà nell'oggetto per l'associazione. Chiama WinJS.Class.mix dopo la definizione dell'oggetto Person. Prima di poter usare la classe Person insieme ad altri elementi, devi infatti definirla.
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```
Devi inoltre chiamare _initObservable nel costruttore di Person per impostare la proprietà _backingData. Modifica il costruttore di Person come indicato:
```
...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...
```
Dopo aver creato un'istanza di un oggetto Person, puoi associare l'oggetto alle due proprietà. Il metodo bind accetta due parametri, ovvero il nome della proprietà o il campo da associare e una funzione che specifica la modalità di associazione. Tale funzione dispone di due parametri: il nuovo valore e il vecchio. Poiché bind è un metodo di istanza, creeremo un'istanza di Person e chiameremo bind nei relativi campi nome e colore. Aggiungi il codice seguente al gestore eventi app.onactivated in default.js.
```
app.onactivated = function (args) {

    // Other activation code ...

    var myPerson = new Person();

    myPerson.bind("name", onNameChange);

    myPerson.bind("color", onColorChange);

    function onNameChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.innerText = newValue;
    }

    function onColorChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.style.color = newValue;
    }
}
```
Avviso Non provare ad associare i dati all'ID di un elemento HTML.

Per permettere che si verifichino gli eventi di modifica, devi modificare la funzione Person._newName.

_newName: function () {
    this["name"] = this._nameArray[this._randomizeValue()];
    this['color"] = this._colorArray[this._randomizeValue()];
    }

Puoi testare l'associazione chiamando il metodo Person.start.
```
myPerson.start();
```
Quando generi ed esegui l'app, vedrai:

Welcome, Harry

Il nome e il colore del nome cambieranno continuamente.

Argomenti correlati

Guida introduttiva: Associazione di dati e stili a elementi HTML

Condividi tramite