Main collection in collections

Question

I am building my first real web application using a backbone, and I am struggling with nested resources.

This is a simplified version of the json response I'm working with:

{ "id": 1, "title": "Test Survey", "groups": [ { "id": 1, "title": "Basic Questions", "questions": [ { "id": 1, "title": "Which is your favorite color?" }, { "id": 2, "title": "Do you have any other hobbies?" } ] }, { "id": 2, "title": "Working Questions", "questions": [ { "id": 3, "title": "Do you think working exp is very important?" } ] } ] } 

Basically a Survey object that has many groups, each group has many Questions.

I can't seem to find a good way to get all this data in models / collections.

I currently have:

 // Models var Question = Backbone.Model.extend({}); var Group = Backbone.Model.extend({}); var Survey = Backbone.Model.extend({ url: surveyURL }); // Collections var GroupsCollection = Backbone.Collection.extend({}); var QuestionsCollection = Backbone.Collection.extend({}); //Views var SurveyView = Backbone.View.extend({ .. }); var GroupsCollectionView = Backbone.View.extend({ .. }); var QuestionsCollectionView = Backbone.View.extent({ .. }); var survey = new Survey({ groups: new GroupsCollection({model: Group}) }); var groupsView = new GroupsCollectionView({collection: survey.get('groups')}); 

This seems to work for nesting groups in a Survey model, but how do I store questions in a collection and then assign them to each model in a group collection?

As already mentioned, I'm relatively new to the spine, so if I go the wrong way or the best way to do it, please let me know.

Greetings.

Answer 1

I usually declare my subcategories as properties of my objects (I remove them from the attribute hash: in your example, this means the link survey.groups instead of survey.get('groups') ) and use model.parse to populate them.

With your Survey Model:

 var GroupsCollection = Backbone.Collection.extend({ model: Group }); var Survey = Backbone.Model.extend({ initialize: function(data) { this.groups = new GroupsCollection(); this.parse(data); }, parse: function(data) { if (data.groups) { this.groups.reset(data.groups); } return _.omit(data, 'groups'); } }); 

Your Group class will be declared in the same way. You will pass your data to the constructor:

 var s = new Survey({ "id": 1, "title": "Test Survey", "groups": [], ... }); var g = s.groups.at(0); //first group var q = g.questions.at(0); //first question in the first group 

Then your data is passed to build the entire hierarchy.

And the demo is http://jsfiddle.net/nikoshr/947Vf/

Answer 2

The above answer was a bit difficult for my case, which led me to this question. This can be useful for anyone looking.

I have created four collections. They must be contained in the collection. The collection view will present four more types of collections whose child views (plain old views) will display data.

When I created a collection of wrappers

new Backbone.Collection([collectionA, collectionB, collectionC, collectionD])

I was returned a collection containing four models, each of which was Backbone models . It was perfect until those models contained my collections .

This was solved by creating wrapper models, each of which contains one of my four collections.

 var wrapperModelA = new Backbone.Model({ collection: collectionA }); ... var wrapperModelD = new Backbone.Model({ collection: collectionD }); return new Backbone.Collection([wrapperModelA, ... , wrapperModelD]); 

This saved my collections and allowed me to create a nested collection structure without defining new classes.