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!

Backbone-Relational assume you're nested model are in returned json from server (or just some parts like id or just array of ids). `{id: 'awd', ...,tickets: ['1','2',...]}` or `{id: 'awd', ...,tickets: [{id: '1', ticketKey: 'awdddawd',...},...]}` — KiT O, Oct 25 '13 at 20:32

Ravi Hamsa · Accepted Answer · 2013-10-26T14:28:29.073

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();

edited Oct 26 '13 at 14:28

answered Oct 26 '13 at 00:54

Ravi Hamsa

4,721
3
14
14

thanks Ravi! That gets me very close. I added a success block within the fetch call, and log the correct amount of tickets. The only thing I'm still struggling with is that fetch() is an async call. When the screen renders, it does not yet have the tickets - so it seems anyway. Any thoughts on how to resolve that? – remotevision Oct 26 '13 at 01:31
when you plan widgets you need to plan for loading, nodata, error, data-overflow states. before fetching tickets, add a loading style to your view, once fetch finished remove that class – Ravi Hamsa Oct 26 '13 at 02:54
So I somehow need to bind the change in this.ticketsCollection to a UI element? – remotevision Oct 26 '13 at 14:07
Or you can re-broadcast all events happening on ticketCollection to main model and your UI element can listen to these re-broadcasted events. edited answer with sample code for re-broadcasting. – Ravi Hamsa Oct 26 '13 at 14:29
I'll give this a shot when I get home. Don't I need to 'listen' to these events in my DealListView so that knows to re-render? – remotevision Oct 26 '13 at 16:59
got it! on success of the fetch, I wasn't adding the collection results to the deal model. Once I did that, it works. self.set({ticketCollection: collection}) ...thanks for all your help! – remotevision Oct 26 '13 at 19:29

Backbone.js with a url to nested collections

1 Answers1