Why / When I should use the Backbone-relational framework

Question

I got a confusion sate now, any one clear my doubt and give more details about http://backbonerelational.org/ please?

basically,

1. Why we use the relational

2. When we need to take a decision to use that

3. Can't we achieve the same with Backone.js itself..?

i have this scenario, i have the sample json like this:

var navi = {
    "mainLinkLabel": "Home",
    "mainLinkHref": "/home.html",
    "sublinks": [
        {
            "sublinkLabel": "subHome1",
            "sublinkHref": "/home/home1.html"
        },
        {
            "sublinkLabel": "subHome2",
            "sublinkHref": "/home/home2.html"
        },
        {
            "sublinkLabel": "subHome3",
            "sublinkHref": "/home/home3.html"
        }
    ]
}

it has the mainlink and sublinks:

for this I should make the model as like to cover the both info:

var bothModels =  Backbone.Model.extend({

    defautls:{

        "mainLinkLable" : "default Lable",
        "mainLinkHref"  : "#",
        "sublinks"      : [
            "sublinkLabel" : "default sublink",
            "sublinkHref"  : "#"
        ]

    }

})

or i need to make separate models for each and connect with Backbone-relational.. like this?

var mainModel = Backbone.Model.extend({
    defautls:{

        "mainLinkLable" : "default Lable",
        "mainLinkHref"  : "#"

    }
})

var subModel = Backbone.Model.extend({
    defaults:{
             "sublinkLabel" : "default sublink",
             "sublinkHref"  : "#"
    }
})

if so, how can i connect these both models.. and what would be the benefit will i get. I search across the internet to find some simple tutorial to understand this.. But i couldn't come with some..

any one clarify me this scenario please..?

Here is the fiddle to play

Answer 1

i have not worked with Backbone relational before. But I would construct the structure, using 2 models and having a parse method on the model and passing the main collection.

var navi = {
    "mainLinkLabel": "Home",
    "mainLinkHref": "/home.html",
    "sublinks": [{
        "sublinkLabel": "subHome1",
        "sublinkHref": "/home/home1.html"
    }, {
        "sublinkLabel": "subHome2",
        "sublinkHref": "/home/home2.html"
    }, {
        "sublinkLabel": "subHome3",
        "sublinkHref": "/home/home3.html"
    }]
};


var MainModel = Backbone.Model.extend({
    defauts: {
        "mainLinkLable": "default Lable",
        "mainLinkHref": "#"
    },
    parse: function(response) {
        if(response.sublinks) {
             this.subCollection = new SubCollection(response.sublinks || null, { parse: true });
        }
        delete response.sublinks;
        
        return response;
    }
})

var SubModel = Backbone.Model.extend({
    defaults: {
        "sublinkLabel": "default sublink",
        "sublinkHref": "#"
    }
});

var MainCollection = Backbone.Collection.extend({
    model: MainModel
});

var SubCollection = Backbone.Collection.extend({
    model: SubModel 
});

var mainCollection = new MainCollection(navi, {parse : true});

console.log(mainCollection);

jsFiddle

So if you want access the sublinks collection inside each model . You would just use

this.subCollection which would give you the collection in question.

Answer 2

Backbone.js does not support nested models from the box. In reality, you deal with nested models much: invoices contains lines, departements contains employees etc.

You should look into you bussine model, if you have nested models as above, Backbone.Relational will help you.

You basically can't archive that with Backbone.js itself, expect of writing own custom code, to overload parse method of models. We did it on one of the project I work, but main lesson learnt - use time-prooven plugin instead of own wheel reinvention. And Backbone.Relational seems to be a good choice.