How do I properly call an associated model in a component? - ember.js

Question

I get undefined when I do the console.log(this.get('item.product.description')); in the component object and an error message in ember inspector, console tab:
Uncaught TypeError: Cannot read property 'length' of undefined
I suspect this is happening because item.product.description is coming from a promise (async call). On page load, the promise isn't fulfilled yet. However, what I don't want to do, is create a .then block in the component, like:
this.get('item.product').then((product) => {
This just makes the component not so isolated, since it expects item.product to be a promise, instead of an actual string.
What other approaches should I consider?:
// Route
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.find('user', params.user_id);
}
});
// Template
{{#each item in model.jobOrders.lastObject.checkout.items}}
{{product-card item=item}}
{{/each}}
The component:
// Component template
<p class="name">{{item.product.name}}</p>
<p class="description">{{truncatedDescription}}</p>
// Component object
import Ember from 'ember';
export default Ember.Component.extend({
truncatedDescription: Ember.computed('item.product.description', function() {
console.log(this.get('item.product.description'));
var truncatedText = this._truncate(this.get('description'), 48);
console.log(truncatedText);
return truncatedText;
}),
actions: {
// ...
},
// Private
_truncate(text, limit) {
if (text.length > limit){
text = text.substr(0, limit - 3) + '...';
}
console.log(text);
return text;
}
});

Answer 1

One possibility would be to pass the description itself to the component instead of the item.
// Template
{{#each item in model.jobOrders.lastObject.checkout.items}}
{{product-card description=item.product.description}}
{{/each}}
This way, when item.product.description resolves, it will update the computed property truncatedDescription in your component.