Appel de fonction entre deux objects séparés

**actiproj** · 26/03/2014, 13h15

Bonjour

J'ai un objet qui est composé de deux autres objets (dossier et document). Pour d'autres applications, j'ai besoin que dossier et document reste indépendant.
Sur un clic de dossier, je cherche à afficher les documents associés, donc dans mon objet dossier, j'ai une référence à document ce qui me permet, en théorie d'appeler une fonction de document depuis dossier

Seulement, ça ne fonctionne pas.
J'ai essayé avec une simple variable, elle reste undefined pour l'objet dossier, alors que le code html de document est accessible depuis dossier (voir les alert du code)

Comment faire pour appeler une fonction ou récupérer le contenu d'une variable d'un autre objet associé ?

Merci à ceux qui pourront m'aider

Voici le code très allégé

Code html :

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

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
</head>
<script type="text/javascript" >

Code :

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
Object.defineProperty(Object.prototype, "gest_dossier_document", { 
    value: function( ) {
        this.div_dossier = $('<div id="dos">Dossier</div><br/><br/>').appendTo($(this));
        this.div_contenu = $('<div id="im">Document</div>').appendTo($(this));
        // Les objets dos et im sont liés car une action sur dos exécutent une fonction selection sur im
        $("#im").gest_di_document({ });            
        $("#dos").gest_di_dossier({ 
            liste_documents_associes : $("#im")
        });
    },
    enumerable : false
});
Object.defineProperty(Object.prototype, "gest_di_dossier", { 
    value: function( params ) {
        var arguments = $.extend({
            liste_documents_associes : null
        }, params || {} ); 
        var that = this;
        $('<div style="color:red;">Erreur</div>').appendTo($(this));
        this.liste_documents_associes = arguments.liste_documents_associes;
        // Ce qui pose problème
        alert(that.liste_documents_associes.html());
        alert(that.liste_documents_associes.toto);
        that.liste_documents_associes.selection(that);
     },
    enumerable : false
});
Object.defineProperty(Object.prototype, "gest_di_document", { 
    value: function( ) {
        $('<div style="color:red;">Erreur</div>').appendTo($(this));
        this.toto = 'test';
        this.selection = function(obj) {
            alert('selection');
// Enumeration de mes documents et affichage
        }
    },
    enumerable : false
});

Code html :

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

1
2
3
4
5
6
7
8
</script>
<div id="test"></div>
 
<script type="text/javascript">
    $(function(){
        $("#test").gest_dossier_document({ });
    });
</script>

**Watilin** · 26/03/2014, 16h20

Salut,

petite remarque préalable : ajouter des membres au prototype d'Object est généralement une mauvaise idée. Comme tu as ajouté enumerable: false, tu as l'air d'être au courant du genre de problèmes que ça pose. Par contre, si ton but est d'ajouter des méthodes aux objets jQuery, tu devrais plutôt les ajouter à jQuery.fn, l'équivalent de Object.prototype. C'est la méthode recommandée pour créer un plugin jQuery car, au sein des fonctions que tu rajoutes, this est directement lié à l'objet jQuery : pas besoin de faire $(this).

Comme dans cet exemple tiré de la doc (en anglais) :

Code :

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

1
2
3
4
$.fn.greenify = function() {
    this.css( "color", "green" );
};
$( "a" ).greenify(); // Makes all the links green.

Ton problème vient du fait que jQuery renvoie des résultats temporaires. Je vais te le montrer en rajoutant une variable globale dans ton code :

Code :

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
var global_debug;
...
Object.defineProperty(Object.prototype, "gest_di_dossier", { 
    value: function( params ) {
        ...
        this.liste_documents_associes = arguments.liste_documents_associes;
        alert("Objets identiques ? " + (global_debug === this.liste_documents_associes));
        ...
     },
    enumerable : false
});
Object.defineProperty(Object.prototype, "gest_di_document", { 
    value: function( ) {
        ...
        this.toto = 'test';
        global_debug = this;
        ...
    },
    enumerable : false
});

L'alerte indiquera false car les objets sont différents.

Le this de la ligne this.toto = "test" est le contexte de la fonction gest_di_document appelée par l'instruction $("#im").gest_di_document(), c'est donc le résultat temporaire de $("#im").
Celui de this.liste_documents_associes vient du paramètre que tu as passé en appelant la fonction gest_di_dossier : { liste_documents_associes: $("#im") }, c'est un autre résultat temporaire de $("#im").

Le problème est donc que tu ajoutes toto sur un objet temporaire qui disparaît à la fin de la fonction gest_di_document. Pour remédier à ça, je te propose d'utiliser une méthode jQuery conçue pour ce genre de cas : .data().

Un dernier détail : j'ai testé ton code en mode strict et j'ai eu une erreur à l'endroit où tu définis ta variable arguments. Si tu ne le sais pas déjà, ce nom de variable est spécial et il vaut mieux ne pas le redéfinir. Il vaut mieux que tu utilises un autre nom, par exemple args ne pose pas de souci.

**actiproj** · 26/03/2014, 17h16

J'ai déjà vu comment contourner cette limitation tout en conservant mes objets (sensiblement modifiés tout de même) mais au moins, tes explications m'ont bien éclairé sur le problème que j'ai posé

Je suis en effet développeur Windows(C#, ...) et Php chevronné mais clairement débutant sous javascript, quelque peu déroutant par rapport à ce que je connais.

J'ai bien lu quelques livres sur Javascript, certains même assez gros mais je trouve que les livres en général ne sont pas assez complet, se contentant trop souvent de lister les méthodes.
Des références à me conseiller ?

**Watilin** · 26/03/2014, 19h21

Des références ? J'en ai eu oui, mais le problème avec les livres c'est que leur contenu n'évolue pas. Je pense qu'il vaut mieux privilégier le Net au support papier, en ce qui concerne les technos du Web en tout cas. Ceci dit, je suis tombé dans la marmite JavaScript avec « Bien développer pour le Web 2.0 » de Christophe Porteneuve, chez Eyrolles, et le livre a été réédité plusieurs fois depuis. Note que cet auteur publie des articles sur Developpez.com

Pour l'anecdote, plus tard j'ai fait un stage où on m'a demandé de choisir une bibliothèque JavaScript pour un projet, j'ai choisi jQuery qui n'était pas encore aussi connu que maintenant, et j'ai été à la Fnac me trouver un livre dessus. J'en ai pris un sobrement intitulé « jQuery » de Jonathan Chaffer et Karl Swedberg, chez Pearson, et j'ai été amusé de voir que la préface de la version française avait été écrite par Didier Mouronval… alias Bovino, l'administrateur de ce forum !

Et sinon, va voir par ici : http://web.developpez.com/livres/

Appel de fonction entre deux objects séparés

JavaScript

Vue hybride

Discussions similaires

Partager

Partager