Polymorphic Relations in Ember.js

Question

There isn't much documentation on polymorphic relationships in Ember.js. So far, the only thing I could find was in the pull request itself. Unfortunately, following that example hasn't led to a working app. Here's what my models looks like:

Whistlr.Event = DS.Model.extend
  eventable: DS.belongsTo 'eventable',
    polymorphic: true

Whistlr.Eventable = DS.Model.extend
  events: DS.hasMany 'event'

Whistlr.Organization = Whistlr.Eventable.extend
  name: DS.attr()

The payload looks like this:

{
    "events": [
        {
            "id": 1,
            "eventable_id": 1,
            "eventable_type": "organization"
        }
    ]
}

And then I try rendering this in my layout:

ul
  each event in controller
    li = event.eventable.name

Unfortunately, this results in a list with many empty lis. Each li is rendered, but the event.eventable.name is coming back blank. Is there something wrong with my approach? How can I render the name for each eventable?

UPDATE:

When I examine the Data with Chrome's Ember Extension, I see that the each entry for eventable is null.

Anton Lantsov Anton Lantsov · Accepted Answer · 2013-10-14T23:24:53

try use 'eventable' key instead of 'eventable_id' and 'eventableType' instead of 'eventable_type' in payload:

{
    "events": [
        {
            "id": 1,
            "eventable": 1,
            "eventableType": "organization"
        }
    ]
}

example - http://jsbin.com/EGiZuL/1

Polymorphic Relations in Ember.js

1 Answers