Ember.js: accessing computed alias from component's javascript

Question

I currently have a model that contains a computed alias, as follows:

model: DS.belongsTo('device-model'),
manufacturerName: Ember.computed.alias('model.manufacturer.name')

I then have a component that is invoked as follows:

{{my-component model=model}}

Now, in the component's Handlebars template, I can easily access the computed property with {{model.manufacturerName}}, however in my-component.js I am having trouble getting it to work. I have tried with:

console.log(this.get('model').get('manufacturerName'))

However, the output is undefined. So far, the only way I can get the manufacturer name from my-component.js is:

this.get('model').get('model')
.then((model) =>{
  return model.get('manufacturer')
})
.then((manufacturer) => {
  console.log(manufacturer.get('name'))
})

So, I'm wondering what is the Handlebars template doing that I can't do in its javascript counterpart? It seems like the Handlebars template is following through the promise, whereas I have to do it manually when it comes to the component's javascript.

Thank you!

feiiiiii feiiiiii · Accepted Answer · 2017-08-16T16:05:40

I think the issue is because of your belongsTo relationship. since { async: true} is the default value for relationships in Ember. so it only fetch the related entities when you actually request them. which means your model is not loaded which means your manufacturerName is not loaded since it is an alias of model.manufacturerName.name.

Ember.js: accessing computed alias from component's javascript

1 Answers