Backbone and best practice getting config JSON

Question

I've got a JSON file that looks like this.

{   
    "config": {
        "setting1": 'blabla',
        "setting2": 'blablabla'
    },
    "content": {
        "title": "Title of an exercise.",
        "author": "John Doe",
        "describtion": "Exercise content."
    },
    "answers": [
        {
            "id": "1",
            "content": "Dog",
            "correct": true
        },
        {
            "id": "2",
            "content": "Fish",
            "correct": false
        }
    ]
}

Than, I create a Backbone View, combined from content model, and answers (which are randomly selected, but It's not most important now).

I've also got a config, which has settings that will determinate which view and collection methods to use.

It seems like a simple task, but as I'm new to Backbone, I'm wondering which is the best way to fetch JSON file, creating one model with url to JSON and than using parse and initialize creating another models and collections (with answers), or using $.getJSON method that will create exactly the models that I need?

I was trying using $.getJSON

$.getJSON(source, function(data) {
    var contentModel = new ContentModel(data.content);
    var contentView = new ExerciseView({ model: contentModel });

    var answerCollection = new AnswersCollection();
    _.each(data.answers, function(answer) {
            answerCollection.add(answer);
    });

    var answersView = new AnswersView({collection: answerCollection});

    $(destination).html( contentView.render().el );
    $('.answers').append( answersView.el );
)};

But It doesn't seem very elegant solution, I know that this application needs good architecture, cause It will be developed with many other Views based on 'config'.

Hope you guys give me some suggestions, have a good day!

Answer 1

I think what you've done works fine and is correct. But you may need to refactor a little bit since "it will be developed with many other Views based on 'config'".

IMHO, the first thing you need to do is to handle failure in your getJson callback to make the process more robust.

Second, it is useful to create a Factory to generate your views because your logic is to generate different views based on the config data from server. So the factory maybe:

contentViewFactory.generate = function(data) {
    var config = data.config;
    ....
    var ActualContentView = SomeContentView;
    var contentModel = new ContentModel(data.content);
    return = new ActualContentView({ model: contentModel });
}

If your logic is simple, you can have a dict map from config to view class like:

var viewMaps = {
    "exercise" : ExerciseView,
    "other": SomeOtherView,
    //....
}

And if every workflow has a AnswersView you can keep that in your getJSON callback. So maybe now your getJSON looks like this:

$.getJSON(source, function(data) {
    // keep the config->view logic in the factory
    var contentView = contentViewFactory.generate(data);

    var answerCollection = new AnswersCollection();
    _.each(data.answers, function(answer) {
        answerCollection.add(answer);
    });

    var answersView = new AnswersView({collection: answerCollection});

    $(destination).html( contentView.render().el );
    $('.answers').append( answersView.el );
})
.fail(){
    //some failure handling
};

Furthermore, if you have common logics in you "ContentView"s, it's natural that you can have a "BaseContentView" or "ContentViewMixin" to extract the common logic and use extends to make your code more OO:

Backbone.View.extend(_.extend({}, ContentViewMixin, {
    //.....
}

So if someone is trying to add a new ContentView, he/she just needs to add some code in the factory to make the new View be generated by config. Then extends the ContentViewMixin to implement the new View.