Backbone.js with a url to nested collections

Question

I'm looking to build out my site using backbone.js. My API returns a url to other various resources (not strict HAL, otherwise maybe this would be ok) but I'm having a little difficulty creating aggregate pages (e.g. pages with content from multiple models/collections.

For example, I have a 'Deals' pages which displays a list of deals. Each deal displays the number of tickets for that particular deal. It is bad practice to perform fetches during a render of the page and Backbone-Relational looks promising but I'm not sure how I can use it with url references to related collections. Sorry if this is a dumb question, I'm new to these frameworks.

Partial example of 'Deal':

{
    "_id": "526a6f520188d9c0e300002a",
    "name": "test",
    "description": "",
    "isPublished": false,
    "images": [],
    "dealType": "group",
    "tickets": "http://[host]/1/deals/526a6f520188d9c0e300002a/tickets"
}

Any advice would be greatly appreciated!

Answer 1

Looks like this is what your looking for.

var DealModel = Backbone.Model.extend({
    initialize:function(){
        var self = this;
        self.ticketsCollection = new (Backbone.Collection.extend({
            url:self.get('tickets')
        }))

       self.listenTo(self.ticketCollection, 'all', function (sourceEventName) {
          self.trigger.apply(self, ['ticket:' + sourceEventName].concat(_.rest(arguments)));
       })

        this.ticketsCollection.fetch(); //this can be done only when you want tickets details
    }
})

var DealCollection = Backbone.Collection.extend({
    model:DealModel,
    url:'urltoDeals'
})


var dealCollection = new DealCollection();
dealCollection.fetch();