Trunk with tree widgets

Question

I am evaluating the Backbone javascript framework for use in a project that will display a hierarchical model in a tree structure widget (I think Windows File Browser).

I love how Backbone thinks about the world. However, there is a lot of coding before I get a proof of concept in which Backbone actually gets the hierarchical model from the server and updates the tree widget. I saw various solutions for representing deep data structures with Backbone there , but I wonder ... did anyone actually do this?

Just knowing that this is possible will help. In fact, the name of the tree image user interface component and the pointers for creating a data hierarchy in Backbone would be even better. A bit of sample code will be incredibly fantastic.

Regarding the size of the data, the tree will launch 100 nodes (folders) with a low number of 1000 sheet elements (documents), and it would be nice to gradually load the data (say, one folder at a time when the user clicks in), although this is probably not showstopper.

Thank!

Answer 1

one option, if you do not want to navigate the hierarchical path of the data set, is to use a nested set ( http://en.wikipedia.org/wiki/Nested_set_model ). this allows you to store the entire collection in one array (or a list or whatever you want to call), and use the "left" and "right" values ​​to determine the structure and hierarchy of the list.

If I remember correctly, this method was originally built to optimize storage and querying data in a relational database. however, I used it several times in C # / Winforms applications to avoid a recursive data hierarchy, and it worked well.

implementing this in javascript should be pretty simple, but I don't know how well it will work with a large list.

Answer 2

Good question, yes, I did it before.

I use the basic relational structure since ( http://backbonerelational.org/ ) 2013, and it works great for me.

My script is similar to yours, I have a complex JSON file with many collections and collections inside the collection.

With this plugin, you can do things like:

• It has an array of relationship definitions. This means that you can define a collection / model tree. here ( http://backbonerelational.org/#RelationalModel-relations )

• Indicate the type of relationship, exmple: in some collection there may be one or more references to the type of relationship.

Class product

extends Backbone.RelationalModel // just an example.

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

Read the documentation. It works well.

Another good plugin that helps me in my implementation is Model Binder ( https://github.com/theironcook/Backbone.ModelBinder ) This helps to link views with models.

Everything is fine with these plugins, everything works.

Hope this helps.

Answer 3

You may find the answer on this page. I tried writing a hierarchical tree on Backbone.js and Epoxy.js https://stackoverflow.com/questions/20639550/backbone-epoxy-js-and-hierarchies-trees

It looks like :

• top level 1
  • 2nd level, element 1
    • 3rd level, element 1
    • 3rd level, paragraph 2
    • 3rd level, paragraph 3
  • 2nd level, paragraph 2
    • 3rd level, paragraph 4
    • 3rd level, paragraph 5
      • 4th level, paragraph 1
      • 4th level, paragraph 2
      • 4th level, paragraph 3
    • 3rd level, paragraph 6
• upper level 2
  • 2nd level, paragraph 3
    • 3rd level, paragraph 7
    • 3rd level, element 8
    • 3rd level, paragraph 9
  • 2nd level, paragraph 4
    • 3rd level, paragraph 10
    • 3rd level element 11
    • 3rd level, element 12