danielhagnoul

Nous voulons lier la valeur d'un élément du DOM avec la valeur d'une propriété d'un objet JS. Le changement de valeur de l'un doit se répercuter sur l'autre.

Le principe de la méthode est simple, on ajoute un accesseur (get) et un mutateur (set) à une propriété de l'objet JS avec Object.defineProperty().

Construisons un exemple de liaison entre un tag "input" de type texte (ID "prenom") et la propriété "prenom" de l'objet "Utilisateur".

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 id="prenom" type="text" value="inconnu">
    <select id="choix">
        <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>

On peut changer la valeur du "prenom" manuellement ou en choisissant une option dans le sélecteur adjacent.

Ci-dessous, le code JS de ma page de test. Elle n'est visible que sous Chrome 36 ou mieux, mais ES5 est disponible sur tous les navigateurs non obsolètes.

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
$( function( ){
 
    var jObjPrenom = $( "#prenom" ),
        Utilisateur = Object.create( Object.prototype );
 
    Object.defineProperty( Utilisateur, "prenom", {
        "get" : function() {
 
            // debug, console, touche F12
            console.log( "Utilisateur get", jObjPrenom.val() );
 
            return jObjPrenom.val();
        },
        "set" : function( value ) {
 
            // debug, console, touche F12
            console.log( "Utilisateur set", value );
 
            if ( jObjPrenom.val() != value ){
                jObjPrenom.val( value );
            }
        },
        "configurable" : true
    });
 
    jObjPrenom.on( "change", function(){
 
       // debug, console, touche F12
       console.log( "change, Utilisateur.prenom = ", Utilisateur.prenom );
    });
 
    /*
     * L'utilisateur de la page web provoquera
     * un set en choisissant une option.
     */
    $( "#choix" ).on( "change", function(){
        Utilisateur.prenom = $( this ).val();
    });
 
});