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

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!

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

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.