Relation between models in backbone.js

Question

I'm looking for the correct backbone structure to achieve the following:

Two server APIs:

GET api/event/4 : returns the event object with id 4.
GET api/event/4/registrations : returns the list of registration objects belonging to event with id 4

I want a view displaying the event object and the list of registrations.

This is very straightforward but I cannot figure out how to organize my Event and Registration models. Should I use backbone-relational?

My Event model is currently like this: (the collection is expected to contain the next 10 events from now).

How should I define my Registration model and how will I initialize it, knowing that it is always in the context of an Event model?

var app = app || {};

app.EventModel = Backbone.Model.extend({
    urlRoot: app.API_server + 'event'
});


app.EventCollection = Backbone.Collection.extend({
    model: app.EventModel,
    url: app.API_server + 'event',
    initialize: function(){
        dt = new Date();
        start_dt = dt.toISOString();
        this.fetch({
            data: {limit:10, start_dt:start_dt},
            error: function (model, response, options) {
                if(response.status == '403') {
                    app.Session.logout();
                }
            }
        })
    }
});

score 2 · Accepted Answer · edited Nov 16 '16 at 20:12

Make a collection for the registration and use the url property as a function. By default, the urlRoot of the models of the RegistrationCollection will be the url of the collection with their id appended.

app.RegistrationCollection = Backbone.Collection.extend({
    url: function() {
        return app.API_server + 'event/' + this.id + '/registrations';
    },
    initialize: function(models, options) {
        options = options || {};
        this.id = options.id;
    }
});

Then, on EventModel initializing, add a RegistrationCollection as a property, passing the event id as an option to the collection.

app.EventModel = Backbone.Model.extend({
    urlRoot: app.API_server + 'event',
    initialize: function() {
        this.registrations = new app.RegistrationCollection(null, {
            id: this.id
        });
    }
});

Remove the fetch from the init, you want to make your collection reusable.

app.EventCollection = Backbone.Collection.extend({
    model: app.EventModel,
    url: app.API_server + 'event',
});

Fetch inside the view or the router, depending on where it makes more sense for your app.

var EventView = Backbone.View.extend({

    initialize: function() {
        this.collection = new app.EventCollection();
        var dt = new Date(),
            start_dt = dt.toISOString();

        // this should be here, outside of the collection.
        this.collection.fetch({
            data: { limit: 10, start_dt: start_dt },
            error: function(model, response, options) {
                if (response.status === 403) {
                    app.Session.logout();
                }
            }
        });
    },
});

Relation between models in backbone.js

1 Answers1