ember.js - Am I rendering from a promise appropriately? -

this question has answer here:

• setting controller property after model hook 2 answers

i trying display user logged in.

few things note. user has async relationship profile. in user model, have:

profile: ds.belongsto('polymorphable', { polymorphic: true, async: true }), 

my application route has:

model() {   return this.store.findrecord('user', this.currentsession.get('id')); }, 

the application template has like:

<div class="profile-photo">   {{image-tag imageurl=model.profile.imageurl}} </div> 

the image-tag component object has computed property:

src: ember.computed('imageurl', {   get() {     let imageurl = this.get('imageurl');     console.log(imageurl.indexof('imgix') > -1) // returns error   } }) 

i uncaught typeerror: cannot read property 'indexof' of undefined. happens because model.profile returns promise , still resolving time template rendered.

this how got working. created aftermodel hook:

aftermodel: function(model, transition) {   model.get('profile').then(profile => {     this.controller.set('profile', profile);   }); }, 

then in application template i, instead, have:

<div class="profile-photo">   {{#if profile}}     {{image-tag imageurl=profile.imageurl size="mini" class="-small -round"}}   {{/if}} </div> 

which tells ember wait profile resolved promise.

does "dirty"? fine? or should consider alternative approach?

actually, need is

aftermodel: function(model, transition) {   return model.get('profile'); } 

following that, can access model.profile usual. see question marked possible duplicate more information.