Backbone with a tree view widget

Question

I\'m evaluating the Backbone javascript framework for use in a project that will display a hierarchical model in a tree view widget (think the Windows file browser).

Answer 1

one option if you don't want to travel down the hierarchical data-set path, is to use a Nested Set (http://en.wikipedia.org/wiki/Nested_set_model). this allows you to store the entire collection in a single array (or list or whatever you want to call it) and use a "left" and "right" value to determine the structure and hierarchy of the list.

if i remember right, this technique was originally build to optimize data storage and queries in a relational database. however, i've used it a number of times in C#/Winforms applications, to avoid having a recursive hierarchy of data, and it worked well.

an implementation of this in javascript should be pretty easy, but i don't know how well it would perform with a large list.

Answer 2

Maybe you will find answer on this page. I tried to write hierarchical tree on Backbone.js and Epoxy.js https://stackoverflow.com/questions/20639550/backbone-epoxy-js-and-hierarchies-trees

It's look like this:

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

Answer 3

Good question, Yes, i've done this before

I've been using backbone relational since ( http://backbonerelational.org/ ) 2013 , and it works fine for me.

My scenario is similar to yours, I have a complicated JSON file with a lot of collections and collection inside collection.

With this plugin you can do things like:

• Has an array of relation definitions. It means that you can define a tree of collections/models. more here ( http://backbonerelational.org/#RelationalModel-relations )

• Specify the type of the relation, exmple: Some collection could have one or more that one reference to a relation type.

class product extends Backbone.RelationalModel //just an example.

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

Take a read on the documentation. It works good.

Another good plugin that help me in my implementation was Model Binder ( https://github.com/theironcook/Backbone.ModelBinder ) It helps to bind views with models.

I'm doing ok with these plugins, everything is working.

Hope it helps.