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!

Rida BENHAMMANE · Accepted Answer · 2014-02-21 16:31:34Z

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, 2014 at 16:31

answered Feb 20, 2014 at 7:59

Rida BENHAMMANE

4,1291 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1854236 Over a year ago

But can I use 'get' method this way?

user1854236 Over a year ago

Certainly, for getting the values of correct, because answers in now not a collection, but just array.

Rida BENHAMMANE Over a year ago

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.

user1854236 Over a year ago

Ok, but do you think it is still more elegant than second approuch with nested hierarchy?

Rida BENHAMMANE Over a year ago

Yes, for me in this approach we keep things simple

|

Diffy · Accepted Answer · 2014-02-20 06:53:21Z

"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

Collectives™ on Stack Overflow

Backbone.js design pattern for JSON data

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related