javascript - The collection nested inside firebase collection's model doesn't have add function

Question

In my application, I am trying to use Firebase to store the real time data based on backbone framework.

The problem goes like this:
I have a sub level model and collection, which are both general backbone model and collection.

var Todo = Backbone.Model.extend({
    defaults: { 
        title: "New Todo",
        completed : true
    }
});

var Todocollection = Backbone.Collection.extend({
    model: Todo,
    initialize: function() {
        console.log("creating a todo collection...");
    },
});

And then there is a high level model, which contains the sublevel collection as an attribute.

var Daymodel = Backbone.Model.extend({
    defaults : {
        day: 1,
        agenda : new Todocollection()
    }
});

and then for the higher level collection, I will firebase collection

var DayCollection = Backbone.Firebase.Collection.extend({
    model: Daymodel
});

So far I can add data to the higher level collection correctly, which has a day attribute and an agenda attribute (which should be a TodoCollection).

The issue is when I try to add data to the sub-level collections, it can't work well.

this.collection.last()
    .get("agenda")
    .add({
        title: this.input.val(), 
        completed: false
    });

The above code will be inside the View part. And this.collection.last() will get the last model. get("agenda") should be the collection object.

But it can't work. The error shows that this.collection.last(...).get(...).add is not a function.

After debugging I found that this.collection.last().get("agenda") returns a general JS object instead of collection object.

I further debugged that if I use backbone collection as the outer collection DayCollection. Everything can go well.

How to solve such problem?

Answer 1

Waitting for answers