Backbone avec un widget d'arborescence

Question

Je suis en train d'évaluer le Cadre javascript Backbone à utiliser dans un projet qui affichera un modèle hiérarchique dans un widget d'arborescence (pensez au navigateur de fichiers de Windows).

I amour comment Backbone pense au monde. Cependant, il y a beaucoup de codage à faire avant d'arriver à une preuve de concept où Backbone reçoit un modèle hiérarchique d'un serveur et met à jour un widget d'arbre. J'ai vu qu'il existait différentes solutions pour représentation de structures de données profondes avec Backbone mais je me demande... si quelqu'un a déjà fait ça ?

Le simple fait de savoir que c'est possible m'aiderait. Nommer le composant d'interface utilisateur de l'arborescence et les pointeurs permettant de hiérarchiser les données dans Backbone serait encore mieux. Un petit exemple de code serait fantastique.

En ce qui concerne la taille des données, l'arborescence comprendra des centaines de nœuds (dossiers) avec des milliers d'éléments de feuille (documents), et il serait agréable de charger progressivement les données (disons, un dossier à la fois lorsque l'utilisateur clique dessus), mais ce n'est probablement pas un obstacle.

Merci !

Answer 1

Si vous ne souhaitez pas emprunter la voie des ensembles de données hiérarchiques, vous pouvez utiliser un ensemble imbriqué (Nested Set). http://en.wikipedia.org/wiki/Nested_set_model ). Cela vous permet de stocker l'ensemble de la collection dans un tableau unique (ou une liste ou tout autre nom que vous souhaitez lui donner) et d'utiliser une valeur "gauche" et "droite" pour déterminer la structure et la hiérarchie de la liste.

si je me souviens bien, cette technique a été conçue à l'origine pour optimiser le stockage des données et les requêtes dans une base de données relationnelle. cependant, je l'ai utilisée un certain nombre de fois dans des applications C#/Winforms, pour éviter d'avoir une hiérarchie récursive de données, et cela a bien fonctionné.

une implémentation de ceci en javascript devrait être assez facile, mais je ne sais pas si cela fonctionnerait bien avec une grande liste.

Answer 2

Bonne question. Oui, je l'ai déjà fait.

J'utilise le relationnel de Backbone depuis ( http://backbonerelational.org/ ) 2013, et cela fonctionne bien pour moi.

Mon scénario est similaire au vôtre, j'ai un fichier JSON compliqué avec beaucoup de collections et de collections dans les collections.

Avec ce plugin, vous pouvez faire des choses comme :

• Possède un tableau de définitions de relations. Cela signifie que vous pouvez définir un arbre de collections/modèles. Plus d'informations ici ( http://backbonerelational.org/#RelationalModel-relations )

• Spécifier le type de relation, par exemple : Une collection peut avoir une ou plusieurs références à un type de relation.

classe produit extends Backbone.RelationalModel //juste un exemple.

relations: [
    {
        type : Backbone.Many
        key : 'the name of model or collection'
    }

Lisez la documentation. Il fonctionne bien.

Un autre bon plugin qui m'a aidé dans mon implémentation était Model Binder ( https://github.com/theironcook/Backbone.ModelBinder ) Elle permet de lier les vues aux modèles.

Je me débrouille bien avec ces plugins, tout fonctionne.

J'espère que cela vous aidera.

Answer 3

Vous trouverez peut-être une réponse sur cette page. J'ai essayé d'écrire un arbre hiérarchique avec Backbone.js et Epoxy.js. Backbone Epoxy js et hiérarchies/arbres

C'est comme ça :

• niveau supérieur 1
  • 2ème niveau, article 1
    • 3e niveau, article 1
    • 3e niveau, article 2
    • 3e niveau, article 3
  • 2ème niveau, article 2
    • 3ème niveau, item 4
    • 3ème niveau, item 5
      • 4ème niveau, objet 1
      • 4ème niveau, objet 2
      • 4ème niveau, item 3
    • 3ème niveau, item 6
• niveau supérieur 2
  • 2ème niveau, article 3
    • 3ème niveau, objet 7
    • 3ème niveau, item 8
    • 3ième niveau, item 9
  • 2ème niveau, article 4
    • 3ème niveau, objet 10
    • 3ème niveau, item 11
    • 3ème niveau, item 12