Backbone.js design pattern for JSON data

Question

I've got a question about best practice when designing JSON file which will be displayed by Backbone.js. I know that Backbone is completly agnostic in this topic, but maybe someone will give me good advice in this certain situation.

In the end, I need to have some views which will look like this

On 4th of July, in _____ we calebrate ____ day.

___ means a gap in text, where I'll have an text input or select (depends on type) which correctness will be verified.

So, I need to have a JSON file that describes that piece of text.

I thought about something like this

"body": [
            {
                "preInputText": "On 4th of July, in ",
                "postInputText": "",
                "answersID": ["1", "2"]
            },
            {
                "preInputText": "we calebrate ",
                "postInputText": " day",
                "answersID": ["3"]
            }
    ]
"answers": [
            {
                "ID": "1",
                "content": "USA",
                "correct": true
            },
            {
                "ID": "2",
                "content": "Canada",
                "correct": false
            },
            {
                "ID": "3",
                "content": "Independent",
                "correct": true
            }

    ]

or, maybe simpleier, but not-so-flat

"body": [
            {
                "preInputText": "On 4th of July, in ",
                "postInputText": "",
                "answers": [
                    {
                        "ID": "1",
                        "content": "USA",
                        "correct": true
                    },
                    {
                        "ID": "2",
                        "content": "Canada",
                        "correct": false
                    },
                ]
            }
]
etc…

So, first approach enforce creating two collections, passing them into one view, and checking values beetween them. The second, just one collection of models that contains both body and answers, but parsing them at initialization and using nested construction.

I don't know is it a bad pratice (to use nested models), but as i read backbone was designed to think in the more flat way.

Maybe there is some kind of another logic? What do you think?

Thanks!

Answer 1

I'm more with the first approach (the flat one) and I don't agree with you that it enforce creating two collections.

You can always create a single collection and override it's parse function, something like this :

var MyCollection = Backbone.Collection.extend({
    ...
    parse: function(resp) {
        this.answers = new Backbone.Collection(resp.answers);
        return resp.body;
    }
});

...

// myCollection is an instance of MyCollection
myCollection.models // refer to questions
myCollection.answers // refer to answers

Answer 2

"body": [
            {
                "preInputText": "On 4th of July, in ",
                "postInputText": "",
                "answers" [ {  "ID": "1", "content": "USA", "correct": "true"},
                            {  "ID": "1", "content": "canada", "correct": "false"}
                          ]
            },

            {
                "preInputText": "we calebrate ",
                "postInputText": " day",
                "answersID": [{  "ID": "3", "content": "Independent", "correct": "true"},

                             ]
            }


    ]

Using this structure, you need to use one collection. Then you can treat each object in this as a model and you can render these using their separate views in a collection view. So need to use nested models here