I am encountering an issue with the widget model that has a simple parent-child structure. A widget can either be a standalone "root" widget or a child widget with a parent.
Here is the Ember data model representation:
export default DS.Model.extend({
name: DS.attr('string'),
parentWidget: DS.belongsTo('widget', { async: true, inverse: null }),
isSubWidget: DS.attr('boolean')
})
I am trying to incorporate a "displayName" property that displays the name for root widgets and shows the combination of parent and child names 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')}"
}
})
However, there seems to be an issue as the child widget's displayName always appears as
undefined - WidgetName
The JSON response looks like this:
{
"widgets": [
{
"id": 2,
"name": "Widget Name",
"is_sub_widget": true,
"parent_widget_id": 1
},
...
}
All the records are returned simultaneously in the JSON response.
I assume that Ember should asynchronously resolve the parent widget and update the string accordingly, but it does not seem to work as expected. Can anyone point out what might be going wrong here?