Vues multiples d'un arbre

[Angelblade]

Bonjour à tous, j'aurais besoin de votre aide sur un problème:

Sachant que:

- Depuis un objet JSON* je crée une structure d'arbre.
- Je veux créer une vue (dans le DOM) de cette arbre.
- Je souhaite pouvoir représenter plusieurs vues de l'arbre depuis le même objet JSON.

Pour créer une vue j'ai deux choix:

1- Soit je passe le JSON et je crée l'arbre spécifique à cette vue.
2- Soit je passe l'arbre déjà créé depuis le JSON à la vue.

Dans le cas 1 le problème c'est que je recrée un arbre à chaque nouvelle vue.
Dans le cas 2 le problème c'est que je suis obligé de recréer une structure d'arbre simplifiée à partir de l'arbre complet afin de pouvoir agir sur les données originales.

* par objet JSON j'entend objet JavasScript de base genre: {name: 'root', children:[]}

[niahoo]

Et donc, quel est le problème ?

[Xenos]

Error : "Vue" is not defined for class "Arbre".
Tips: Please tell us what "Vue" means to you.

[Angelblade]

Le problème c'est que je ne sais pas quelle solution choisir.

Ce que j’entends par une vue c'est: explorateur de fichier, menu contextuel avec sous menu, toolbar, etc.

Cas pratique:

// explorerELement est une classe dessinant une structure d'arbre en HTML

var root = {name: 'root', children: ['a','b','c']};



// SOLUTION1:

var tree = new Tree(root);

var explorerElement = new ExplorerElement(tree);

var secondExplorer = new ExplorerElement(tree, {mutliSelection:true});

// SOLUTION2:

var explorerElement = new ExplorerElement(root);

var secondExplorer = new ExplorerElement(root, {multiSelection:true});

Inconvénient solution 1: ExplorerElement doit créer une structure d'arbre qui reflète tree pour ne pas l'altérer directement.
Inconvénient solution 2: ExplorerElement doit faire new Tree(root) deux fois au lieu d'une

En l'expliquant il m'apparait plus difficile d'implémenter la 1 mais c'est indispensable si je veux pouvoir agir sur les deux vues lorsque j'en modifie une...

Je crois que j'ai ma réponse nan? ^^

[niahoo]

Non mais c'est pas clair, je vois pas la différence entre les deux solutions ...

Une vue c'est censé afficher, donc tu peux leur passer le même objet Tree, elles devraient juste lire les données. Et si elles mettent à jour tes données, alors c'est aussi bien que la mise à jour se reflette dans les autres widgets qui les exploitent, non ?

Ici on voit pas ce que Tree() apporte en plus que l'objet root, donc les deux solutions ne sont pas différentes.

[Angelblade]

Tree sert à manipuler les données et à transformer chaque objet en noeud Treenode.

En fait la différence entre les deux solutions c'est que dans un cas ExplorerElement est une sous classe de Tree, il recoit directement root qu'il faut transformer en Tree.
Alors que dans l'autre il se contente de lier les noeuds de Tree aux éléments qu'il va créer.

[Xenos]

Si tu transmet directement le root (JSON), alors tu prends le risques que la fonction le modifie.
Si tu passes un Tree, tu peux te mettre en place un système (aka, une conception) qui empêche l'édition de cet arbre lors de l'appel à la fonction.

En d'autres mots, passer par Tree permettra d'émuler le mot-clef "const" utilisé en C par exemple.

[Angelblade]

En effet je cherche à ne pas modifier Tree.

Comment feriez vous pour propager les modifications sur les vues ?
J'ai un système d'event qui me permet d'écrire:

function ExplorerElement(tree){ 

     tree.on('rename', function(node, name){

           this.toNodeView(node).rename(name);

     }.bind(this));

}

J'écoute l'event rename sur tree et lorsqu'il se produit je veux le propager à la vue correspondante.
Comment implémenter toNodeView qui doit retrouver la vue correspondant à node?

// idée1: une vue possède une référence vers node, je parcoure tous les noeuds pour retrouver la vue

ExplorerElement.prototype.toNodeView = function(node){

    return this.getNode(function(nodeView){

         return nodeView.node == node;

    });

};



// idée2: chaque vue de node est stocké dans node.views

ExplorerElement.prototype.toNodeView = function(node){

    var i = node.views.length;

    while(i--){

          if( node.views[i].view == this ) return node.views[i];

    }

    return null;

};

Suis je clair? mes idées sont-elles bonnes? auriez vous d'autres idées?

[Ter Rowan]

pousse plus loin l'événement :

si tu veux que tree soit modifié, tree écoute rename, si tu ne veux pas, tree n'écoute pas

pour chacune de tes vues, si tu veux qu'elle soit modifiée, ta vue écoute rename, si tu ne veux pas, elle ne l'écoute pas