Ember Data - Get parent value from child

Question

I have a widget model which has a shallow parent-child relationship. A given widget may be a "root" widget and not have any parent, or it may be a child widget which has a parent.

The ember data model looks like this:

export default DS.Model.extend({
  name:         DS.attr('string'),
  parentWidget: DS.belongsTo('widget', { async: true, inverse: null }),
  isSubWidget:  DS.attr('boolean')
})

I'm trying to add a "displayName" property that will show the name for root widgets, or "parent name - child name" for child widgets

displayName: Ember.computed('name', 'parentWidget.name', 'isSubLob',  function() {
  if this.get('isSubWidget') {
    return "#{this.get('parentWidget.name')} - #{@get('name')}"
  }
  else {
    return "#{this.get('name')}"
  }
})

This is not working, however. The child lob's displayName always comes as

undefined - WidgetName

The json is being returned like so:

{
"widgets": [
  {
    "id": 2,
    "name": "Widget Name",
    "is_sub_widget": true,
    "parent_widget_id": 1
  },
  ...
}

For the record, all the records are being returne by the json at the same time.

I feel like Ember should be asyncronously resolving the parent widget and the string should be updated as well, however it doesn't seem to be working. Any idea what I'm doing wrong here?

Answer 1

I would say you have two issues:

1. You're not declaring an inverse to your parentWidget relationship, which means that Ember Data is guessing the inverse (and likely guessing wrong). You should change that declaration to look like this, just to be sure:

    parentWidget: DS.belongsTo('widget', { async: true, inverse: null }), 

   I doubt that will fix your issue, but it's good practice.

2. You're not waiting for your promise to resolve before trying to use the name. You've specified the parentWidget relationship as being asynchronous, which means that @get('parentWidget') will not return a model. It's going to return a promise that will eventually resolve to your model. Normally this would be fine as the computed property would just recompute when the promise resolves, except that you're not watching the proper key.

    /* PS: Assuming that your comma was misplaced on this line */ displayName: Ember.computed('name', 'parentWidget', function() { ^^^^^^^^^^^^ 

   As seen, you're only watching the parentWidget property. So if the name property on the parentWidget every updates, you won't be notified. Change that line to this and you should be good to go:

    displayName: Ember.computed('name', 'parentWidget.name', function() { 

   Just keep in mind that the first few times through, parentWidget.name will still be undefined . It won't be the value you want until the promise resolves, which means the computed property could run several times before it does resolve.