CODEWITHSUNDEEP
backbone.jsbackbone.js-collections
Jarrod
Jarrod

Reputation: 396

How to create Nested Models & Collections (sub collections)

I'm just starting with Backbone.js and I am having trouble with nested models and collections.

For this example, I only have a single endpoint, /vocabulary.json.

Here is a sample of what that will return:

[
{
    "id": 1,
    "words": [
        {
            "native": "hello",
            "foreign": "hola"
        },
        {
            "native": "yes",
            "foreign": "si"
        },
        {
            //... More words in this lesson
        }
    ]
},
{
    //... More lessons coming from this endpoint
}
]

It's basically of collection of lessons, and each lesson has a collection of vocabulary words.

How could I create a words collection without another url endpoint (required by collections, it seems)?

Here's what I have so far. Actually, this is a stripped down, basic version because everything I'm trying isn't working.

/entities/vocabulary.js

Entities.Vocabulary = Backbone.Model.extend({});

Entities.Vocabularies = Backbone.Collection.extend({
    model: Entities.Vocabulary,
    url: "/vocabulary.json"
});

// Here is where I am struggling

Entities.Vocabulary.Word = Backbone.Model.extend({
    // what to do?
});

Entities.Vocabulary.Words = Backbone.Collection.extend({
    // what to do?
    // Need some method to go into the Entities.Vocabularies Collection, pluck a given id
    // and return the "words" attribute as a new Collection to work from.
});

Perhaps, I am thinking about this completely wrong, but I am hoping I have explained my problem well enough to help you help me.

Upvotes: 1

Views: 208

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

you are almost there. You can use parse method on the model where you can write up your logic of associating the words collection to the vocabulary model.. Something in these lines.

// This would be your main Model
// Set the idAttribute on it
// Use the parse method here which hits before initialize
// where you attach the words collection on each Vocabulary  Model
Entities.Vocabulary = Backbone.Model.extend({
    idAttribute : 'id',
    parse: function (response) {
        // If theresponse has wods in response
        // attach it words collection to the Vocabulary Model
        if (response.words) {
           this.words = new Entities.Vocabulary.Words(response.words || null, {
               parse: true
           });
        }
        // Delete the words object from response as the collection is already 
        // created on the model
        delete response.words;

        return response;
    }
});

// Collection of Vocabulary
Entities.Vocabularies = Backbone.Collection.extend({
    model: Entities.Vocabulary,
    url: "/vocabulary.json"
});

// This would be the model for Word inside a Specific Vocabulory
// Associate a idAttribute if it has one.
// Add a parse method if you have any other extra processing for this model
Entities.Vocabulary.Word = Backbone.Model.extend({

});

// Just a Collection of words for the vocabulory
Entities.Vocabulary.Words = Backbone.Collection.extend({

});


// Pass the object, and pass in the parse: true 
// parameter so that parse is called before initialize
var vocabularies = new Entities.Vocabularies(navi, {
    parse: true
});

// If you want to fetch a new collection again you would just do 

//vocabularies.fetch({parse: true});


console.log(mainCollection);

So each model should have a words collection directly on the Vocabulary model.

Check Fiddle

Upvotes: 1

Related Questions