Voir le flux RSS

danielhagnoul

Liaison de données (data binding) réciproque en ES5

Noter ce billet
par , 16/11/2014 à 02h18 (657 Affichages)
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();
    });
 
});

Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Viadeo Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Twitter Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Google Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Facebook Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Digg Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Delicious Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog MySpace Envoyer le billet « Liaison de données (data binding) réciproque en ES5 » dans le blog Yahoo

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

Catégories
jQuery , Javascript , Développement Web

Commentaires