Voir le flux RSS

danielhagnoul

Liaison de données en ES5, un pas plus loin.

Noter ce billet
par , 27/11/2014 à 23h16 (709 Affichages)
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 );

Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Viadeo Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Twitter Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Google Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Facebook Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Digg Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Delicious Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog MySpace Envoyer le billet « Liaison de données en ES5, un pas plus loin. » dans le blog Yahoo

Mis à jour 07/06/2015 à 11h56 par danielhagnoul

Catégories
Javascript , Développement Web

Commentaires