Comment lier un objet complexe (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Dans de nombreux cas, vous voulez que votre application se lie à des objets complexes, notamment des objets qui gèrent les processus qui ne sont pas contrôlés par l’interface utilisateur de l’application. Cette rubrique montre comment écrire une application qui affiche des données provenant d’un objet contenant un nom et une couleur, ce qui correspond essentiellement à Démarrage rapide : liaison de données et de styles. Ici, c’est l’objet lui-même qui gère le processus de modification, plutôt que de répondre à un bouton qui déclenche la modification.

Prérequis

Instructions

Étape 1: Définition d’un projet destiné à utiliser une liaison

  1. Créez une application Windows Runtime en JavaScript vide et nommez-la ObjectBinding.

  2. Dans default.html, ajoutez un élément DIV pour la liaison et donnez-lui l’ID de « objectBinding », un texte interne Bienvenue et un élément SPAN dont l’ID est « bindableSpan », tel qu’indiqué ici.

    <body>
        <div id="objectBinding">
          Welcome
          <span id="bindableSpan"></span>
        </div>
    </body>
    

Étape 2: Définition d’un objet complexe

  1. Définissez un objet Person qui comporte des champs Nom et Couleur, un tableau de noms, un tableau de noms de couleur et une méthode privée pour donner un index aléatoire au tableau. Pour la définition de cet objet, vous pouvez utiliser la méthode WinJS.Class.define. Ajoutez ce code dans la fonction anonyme appelée immédiatement dans 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); 
            }
        });
    
    })();
    
  2. Ajoutez maintenant à la définition de l’objet Person (le deuxième argument passé à WinJS.Class.define) deux méthodes publiques qui démarrent et arrêtent un processus qui modifie les champs name et color toutes les 500 millisecondes. L’appel complet à WinJS.Class.define est présenté ci-dessous.

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

Étape 3: Liaison de l’objet au code HTML

  1. Pour le moment, l’objet Person n’est pas observable ; c’est-à-dire qu’aucune notification n’est émise quand il se modifie. Nous pouvons le rendre observable en associant l’objet Person à la fonctionnalité de liaison adéquate. La fonction WinJS.Class.mix ajoute à l’objet Person la fonctionnalité de l’objet WinJS.Binding.mixin, qui inclut une méthode bind, et la fonctionnalité de la fonction WinJS.Binding.expandProperties, qui crée des propriétés sur l’objet pour la liaison. Appelez la fonction WinJS.Class.mix après la définition de l’objet Person. (Vous devez définir la classe Person avant de pouvoir mélanger quoi que ce soit avec elle.)

    WinJS.Class.mix(Person,
        WinJS.Binding.mixin,
        WinJS.Binding.expandProperties({name: "", color: ""})
    ); 
    
  2. Vous devez également appeler _initObservable dans le constructeur Person pour définir la propriété _backingData. Modifiez le constructeur Person comme suit :

    
    ...
    function () {
        this._initObservable();
    
        this.name = "Harry";
        this.color = "blue";
        this.timeout = null;
        }
    ...
    
  3. Lorsque vous avez instancié un objet Person, vous pouvez le lier aux deux propriétés. La méthode bind prend deux paramètres : le nom de la propriété ou du champ qui doit être lié et une fonction qui spécifie la manière de la/le lier. Cette fonction a deux paramètres : la nouvelle valeur et l’ancienne valeur. La méthode bind étant une méthode d’instance, nous allons nous contenter pour le moment d’instancier un objet Person et d’appeler la méthode bind sur ses champs Nom et Couleur. Ajoutez le code suivant dans le gestionnaire d’événements app.onactivated dans 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;
        }
    }
    

    Avertissement  Vous ne devez pas essayer de lier des données à l’identificateur d’un élément HTML.

     

  4. Pour que les événements de changement puissent avoir lieu, vous devez changer la fonction Person._newName.

    _newName: function () {
        this["name"] = this._nameArray[this._randomizeValue()];
        this['color"] = this._colorArray[this._randomizeValue()];
        }
    
  5. Vous pouvez tester la liaison en appelant la méthode Person.start.

    myPerson.start();
    

    Lorsque vous générez et exécutez l’application, vous devez voir ceci :

    Bienvenue, Harry

    Le nom et la couleur du nom doivent changer en continue.

Rubriques associées

Démarrage rapide : liaison de données et de styles à des éléments HTML