danielhagnoul

Nous allons utiliser les fonctions getType(), setModel() et createDOMObject() des billets précédents pour améliorer notre exemple de liaison de données.

Fragment du DOM

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="formulaire">
    <input type="text" value="inconnu">
    <select>
        <option value="inconnu">0</option>
        <option value="Henri">1</option>
        <option value="Pierre">2</option>
        <option value="Daniel">3</option>
        <option value="Jean">4</option>
    </select>   
</div>

Construction de l'objet Formulaire

Il contiendra les sélecteurs : Formulaire.dom_prenom (input) et Formulaire.dom_choix (select).

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

var Formulaire = createDOMObject( document.querySelector( "#formulaire" ), [ "prenom", "choix" ] );

Ajout des accesseurs (get) et mutateurs (set) pour les propriétés "prenom" et "choix"

On construit une liaison de données entre la propriété de l'objet Formulaire et l'objet du DOM qui lui correspond.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Object.defineProperties( Formulaire, {
    "prenom" : {
        "get" : function() {
            return this.dom_prenom.value;
        },
        "set" : function( value ) {
            if ( this._objectModel.prenom === getType( value ) && this.dom_prenom.value != value ){
                this.dom_prenom.value = value;
            }
 
            /*
             * debug, console, touche F12
             * Pour nos tests.
             */
            console.log( Formulaire.prenom, Formulaire.choix );
        },
        "enumerable" : true
    },
    "choix" : {
        "get" : function() {
            return this.dom_choix.value;
        },
        "set" : function( value ) {
            if ( this._objectModel.choix === getType( value ) ){
 
                /*
                 * this.dom_choix.children est un NodeList !
                 * Pas de map() ou de forEach().
                 */ 
                var options = this.dom_choix.children,
                    n = options.length,
                    names = [];
 
                for ( var i = 0; i < n; i++ ) {
                    names.push( options[ i ].value );
                }
 
                if ( names.indexOf( value ) > -1 ){
                    Formulaire.dom_choix.value = value;
                    Formulaire.prenom = value;
                }
            }                
        },
        "enumerable" : true
    }
});

Activation d'un gestionnaire d'événement "change" sur l'objet Formulaire.dom_choix

Action : get sur "choix" et set sur "prenom".

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Formulaire.dom_choix.addEventListener( "change", function( ){
    Formulaire.prenom = Formulaire.choix;
}, false );

Tests

Ma page de test.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
 * Tests
 *
 * 1) Vous avez 10s pour changer le prenom !
 * 2) Set prenom.
 * 3) Set choix.
 * 4) Set choix avec une valeur incorrecte car
 * inexistante dans les options de l'élément
 * select.
 */    
setTimeout( function(){
    console.log( Formulaire.prenom );
    Formulaire.prenom = "Louis";
}, 10000 );
 
setTimeout( function(){
    Formulaire.choix = "Pierre";
}, 13000 );
 
setTimeout( function(){
    Formulaire.choix = "Jean-Pierre";
}, 15000 );