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!

score 1 · Answer 1 · answered Feb 20 '14 at 06:53

"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

Rida BENHAMMANE · Accepted Answer · 2014-02-21T16:31:34.723

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

edited Feb 21 '14 at 16:31

answered Feb 20 '14 at 07:59

Rida BENHAMMANE

4,111
1
14
25

But can I use 'get' method this way? – user1854236 Feb 20 '14 at 15:02
Certainly, for getting the values of correct, because answers in now not a collection, but just array. – user1854236 Feb 20 '14 at 16:02
You can't use get, but as you say you can manipulate the `myCollection.answers` as you want because it's an array of objects. – Rida BENHAMMANE Feb 20 '14 at 18:54
Ok, but do you think it is still more elegant than second approuch with nested hierarchy? – user1854236 Feb 20 '14 at 20:51
Yes, for me in this approach we keep things simple – Rida BENHAMMANE Feb 21 '14 at 00:53
True, but maybe even better it's to create a model, that has two collections - one with body, another with answers. Than, I can easily use 'get'. The problem now is, when I render my 'body', I can't easily check if the answers are true, because I loose all of backbone collection profits… I could only use array.find instead of collection.get, am I right? – user1854236 Feb 21 '14 at 15:45
I updated my answer, now you have a collection with all the method you want. – Rida BENHAMMANE Feb 21 '14 at 16:32

Backbone.js design pattern for JSON data

2 Answers2