A Backbone.js Collection of multiple Model subclasses

Question

I have a REST Json API that returns a list "logbooks". There are many types of logbooks that implement different but similar behavior. The server side implementation of this on the Database layer is a sort of Single Table Inheritance, so each JSON representation of a logbook contains its "type" :

[
  {"type": "ULM", "name": "My uml logbook", ... , specific_uml_logbook_attr: ...},
  {"type": "Plane", "name": "My plane logbook", ... , specific_plane_logbook_attr: ...}
]

I would like to replicate this server model on the client side, so I have a base Logbook class and multiple logbook sub classes :

class Logbook extends Backbone.Model

class UmlLogbook extends Logbook

class PlaneLogbook extends Logbook

...

My Backbone.Collection is a set of Logbook models that i use to query the JSON API :

class LogbookCollection extends Backbone.Collection
  model: Logbook
  url: "/api/logbooks"

When I fetch the logbook collection, is there a way to cast each Logbook to its corresponding sub class (based on the JSON "type" attribute) ?

satchmorun · Accepted Answer · 2011-08-04T00:22:09.313

There is indeed.

When you call 'fetch' on a collection, it passes the response through Backbone.Collection.parse before adding it to the collection.

The default implementation of 'parse' just passes the response through, as is, but you can override it to return a list of models to be added to the collection:

class Logbooks extends Backbone.Collection

  model: Logbook

  url: 'api/logbooks'

  parse: (resp, xhr) ->
    _(resp).map (attrs) ->
      switch attrs.type
        when 'UML' then new UmlLogbook attrs
        when 'Plane' then new PLaneLogbook attrs

EDIT: whoa, idbentley got there before me. the only difference being he used 'each' and I used 'map'. Both will work, but differently.

Using 'each' effectively breaks the chain that the 'fetch' call started (by returning 'undefined' - the subsequent call to 'reset' (or 'add') therefore will do nothing) and does all the processing right there in the parse function.

Using 'map' just transforms the list of attributes into a list of models and passes it back to the chain already in motion.

Different strokes.

EDIT AGAIN: just realized there's also another way to do this:

The 'model' attribute on a collection is there only so the collection knows how to make a new model if it's passed attributes in 'add', 'create' or 'reset'. So you could do something like:

class Logbooks extends Backbone.Collection

  model: (attrs, options) ->
    switch attrs.type
      when 'UML' then new UmlLogbook attrs, options
      when 'Plane' then new PLaneLogbook attrs, options
      # should probably add an 'else' here so there's a default if,
      # say, no attrs are provided to a Logbooks.create call

  url: 'api/logbooks'

The advantage of this is that the collection will now know how to 'cast' the right subclass of Logbook for operations other than 'fetch'.

Thanks for your very complete answer! I knew the existence of the parse method, but I didn't know the result was directly passed to the reset method... Should have dig the source code better ! Thx again — Tricote, Aug 04 '11 at 08:02
Your edit using the `model` method is much better than using `parse` because as you rightly point out it works for `reset`. This way whether the new models come in via `fetch` or bootstrapped in the HTML it still works. Thanks! — philoye, May 24 '12 at 18:44
i suggest you move up that last part so people see it more :) just a thought — corroded, Jul 13 '12 at 02:30
Yes, definitely prefer the second method. Simple and elegant, thanks so much! — jordancooperman, Sep 14 '12 at 17:25
Please note that the model function breaks `this.model.prototype.idAttribute` and may cause duplicates. Take a look at this [answer](http://stackoverflow.com/a/35603643/1218980) which solves it with `ModelFactory.prototype.idAttribute`. — Emile Bergeron, Jul 07 '16 at 14:30
To add to my previous comment, you could also override collection's `modelId` function. — Emile Bergeron, Jul 19 '16 at 18:01

score 11 · Answer 2 · answered Aug 03 '11 at 23:37

Yes. You can override the parse function on the collection (I'm gonna use javascript instead of coffeescript, because it's what I know, but the mapping should be easy):

LogbookCollection = Backbone.Collection.extend({
    model: Logbook,
    url: "/api/logbooks",
    parse: function(response){
      var self = this;
      _.each(response, function(logbook){
          switch(logbook.type){
             case "ULM":
               self.add(new UmlLogBook(logbook);
               break;
             case "Plane":
               ...
          }
      }
    }
 });

Hope this helps.

score 3 · Answer 3 · answered Mar 31 '12 at 16:32

as of backbone 0.9.1, i've started using the method described in esa-matti suuronen's pull-request:

https://github.com/documentcloud/backbone/pull/1148

after applying the patch, your collection would be something like this:

LogbookCollection = Backbone.Collection.extend({

    model: Logbook,

    createModel: function (attrs, options) {
        if (attrs.type === "UML") { // i'am assuming ULM was a typo
            return new UmlLogbook(attrs, options);
        } else if (attrs.type === "Plane") {
            return new Plane(attrs, options);
        } else {
            return new Logbook(attrs, options);
            // or throw an error on an unrecognized type
            // throw new Error("Bad type: " + attrs.type);
        }
    }

});

i believe this would fit since you're using STI (all models have unique ids)

score 1 · Answer 4 · answered Feb 04 '13 at 01:49

1

parse can work on its own, or you could use the submodelTypes feature of Backbone-Relational.

answered Feb 04 '13 at 01:49

philfreo

41,941
26
128
141

Alexander Ulitin · Answer 5 · 2012-02-01T19:29:18.107

0

Maybe it's bad to use eval, but this is much more ruby-style way (coffeescript):

  parse: (resp)->
    _(resp).map (attrs) ->
      eval("new App.Models.#{attrs.type}(attrs)")

So you don't need to write a lot of switch/cases, just set type attribute in your JSON. It works very good with rails+citier or other multitable inheritance solution. You can add new descendants without adding them to your cases.

And you can use such constructions in other places where you need a lot of switch/cases depending on your model class.

edited Feb 01 '12 at 19:29

answered Jan 31 '12 at 23:39

Alexander Ulitin

1,150
1
10
23

5

You don't really need to use eval here, new App.Models[attrs.type](attrs) will work just fine. – Dmitry Apr 02 '12 at 08:56

A Backbone.js Collection of multiple Model subclasses

5 Answers5

Linked