55

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).

I love how Backbone thinks about the world. However, there's a lot of coding involved before I get to a proof of concept that has Backbone actually receiving a hierarchical model from a server and updating a tree widget. I've seen there's various solutions for representing deep data structures with Backbone, but I'm wondering... has anyone actually done this?

Just knowing that it's possible would be a help. Actually naming the tree view UI component and pointers for making data hierarchical in Backbone would be even better. A bit of sample code would be amazingly fantastic.

As far as data size, tree will run 100's of nodes (folders) with low 1000's of leaf items (documents), and it would be nice to progressively load the data (say, one folder at a time as the user clicks in), though that's probably not a showstopper.

Thanks!

Community
  • 1
  • 1
Dean Moses
  • 2,372
  • 2
  • 24
  • 36
  • 2
    Well, I asked the question about Deep Data Structures, and I can say that Backbone-Relational really does what it says it does, and I've created the relations as they exist. Also, I should add that for relational structures where all the nodes are the same, I flattened the structure on the client and used a linked list on the side to maintain the tree-like structure. So yes, it's possible. I will add that at about 10,000 items, Firefox 2 really bogs down. Chrome is performant. – Elf Sternberg May 27 '11 at 22:45
  • Thanks for the info. Would you go that route again, or would you use a system that supports hierarchy natively? – Dean Moses May 28 '11 at 22:53
  • It depends upon what the server provides. In the case described, the server did not provide search and filter on the server side, so all of the content needed to be on the client. By creating a filtered collection and then traversing the node structure, I was able to display the content in a reasonably performant way. If the server had been able to provide filtered collections, I would have gone with a relational-based solution. – Elf Sternberg May 30 '11 at 17:41
  • I've done something on these lines...about 4 levels deep relatively balanced tree. But to know if I can contribute I'd need to know how is your data organized at the backend? Relational, key/value and how/what is being sent back, json/xml? Also when you say hierarchically populate the model do you mean `Backbone.Model` or `Backbone.Collection` or model in an abstract sense of concept? Do you only need to populate from server or "also" sync it back (i.e., is it "once loaded done" type?) It'd be great if you could update your question with some of this info... – PhD Aug 18 '11 at 19:13
  • Nupul: the data's relational but might move to Mongo. Can send it to the browser using json, XML, or anything else that's convenient. I mean populating the Backbone.Model and Collection specifically. I need two-way synching: that's why people use Backbone in the first place, right? – Dean Moses Oct 20 '11 at 00:48

3 Answers3

5

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.

olafure
  • 3,518
  • 2
  • 33
  • 45
Derick Bailey
  • 72,004
  • 22
  • 206
  • 219
1

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.

rcarvalho
  • 790
  • 1
  • 4
  • 14
0

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
Community
  • 1
  • 1
Alexey
  • 11
  • 2