Working with backbone and json

Question

I've come to a point in my application where I can't decide which type of JSON structure I should use. My application has multiple nested views like below -

-pageView
    -sectionView
        -articleView
            -widgetView
    -sectionView
        -articleView
            -widgetView
            -widgetView
        -articleView
            -widgetView

Currently I am using single JSON files that contain all the pageViews in one and all the sectionViews in another...and so on. This is because I rely heavily on Backbone Collections to sort my models and render each view. But obviously for this type of structure I'm doing about four fetches just for a page view. (This isn't even all my app). I fetch all of these at the beginning of my app as they are needed for a search facility and showing completion states. Each model knows of it's parent and this is how it is able to be inserted into the parents container.

On the other hand I could use one big nested JSON file that contains everything and would look something like this:

{
    "page":"page_05",
    "title":"Title of page",
    ...
    "sections":[
        {
            "section":"section_05",
            "title":"section title",
            "articles":[
                {
                    "article":"article_05",
                    "title":"article title",
                    "widgets":[
                        {
                            "widget":"widget_05",
                            ...
                        }

                    ]
                }
            ]
        },
        {
            "section":"section_10"             
            ...
        }

    ]

I don't mind which way I structure it as I could simply put my data in the collections. It just seems a bit strange to have to write functions that will do this when Backbone fetch already does this if I use single JSON files. I guess what I'm asking is...has anyone come across this problem before and what were the solutions? Any thoughts or demos are as always welcome. Thanks in advance.

Answer 1

If I can try and generalize, your issue is that the ideal data format (one giant response) doesn't seem to fit Backbone's scheme of using fetch on models and collections. This is not an uncommon problem with Backbone, and so Backbone has a solution built-in: parse.

Both Backbone.Collection and Backbone.Model have a parse method, which by default does nothing. However, you can override it to add custom response handling of whatever comes back from a fetch call, eg.:

parse: function(originalGiantResponse) {
    someModel.set(originalGiantResponse.someModelPart);
    someCollection.add(originalGiantResponse.someCollectionPart);
    return originalGiantResponse.mainPart; // use the "mainPart" of the response
}

By using one or more parse overrides you should be able to use any structure for your server-side JSON that you want, and still make it fit any client-side Backbone code structure you want.