Question

I’ve got a Collection and a Model, both using attributes/options to augment them with additional capabilities. Here’s the Model (LoadRouteGroup):

return Backbone.Model.extend({
    initialize: function () {
        console.log(this);
    },
    fetchf: function () {
        console.log("FETCH");
    }
});

And the Collection (LoadRouteGroups):

return Backbone.Collection.extend({
    constructUrl: function(options) {
        if (options.groupingType === "facility") {
            // TODO: new endpoint: /api/v1/loadroutes?grouping=facility
            this.url = clawConfig.endpoints.webApiRootUrl + "/api/loads/facilities";
        }
        else {
            this.url = clawConfig.endpoints.webApiRootUrl + "/api/v1/loadroutes";
        }
    },
    initialize: function (models, options) {
        options || (options = {});

        this.constructUrl(options);

        console.log(this);
    }
});

They’re instantiated as such:

var loadRouteGroup = new LoadRouteGroup({
    entityType: "facility"
});

// WORKS
loadRouteGroup.fetchf();

// assign groupingType option to collection to denote which URL to use
var loadRouteGroups = new LoadRouteGroups({
    model: loadRouteGroup
}, {
    groupingType: "facility"
});

var firstGroup = loadRouteGroups.at(0);

// DOESN'T WORK
firstGroup.fetchf();

// WORKS
firstGroup.attributes.model.fetchf();

I would expect that call to firstGroup.fetchf() to work… but it doesn’t. Instead, I have to weirdly drill down and use firstGroup.attributes.model.fetchf() in order to access the method.

What’s going on here? This would seem straightforward to me, but I can’t for the life of me figure out what’s wrong with the relationship between my Collection and Model.

Answer 1

The collection definition should include the model type:

return Backbone.Collection.extend({
    // ....
    model: LoadRouteGroup
});

When initializing the collection, pass in an array of models:

var loadRouteGroup = new LoadRouteGroup({
    entityType: "facility"
});
var loadRouteGroups = new LoadRouteGroups([loadRouteGroup], {
    groupingType: "facility"
});