Resolve a string from a Ember model computed promise

Question

I have a computed property on an EmberJS model:

imageUrl: computed('image', function () {

    let promise = new RSVP.Promise(function (resolve, reject) {
        resolve('image.png');
    });

    //
    return DS.PromiseObject.create({promise: promise});
}),

Which works, however the model resolves the promise to an object so I have to do something like:

resolve({image: 'image.png'});

To actually access the value in the template, using something like:

{{result.imageUrl.image}}

Rather than just:

{{result.imageUrl}}

Obviously the problem appears to be to do with DS.PromiseObject but I have no idea what to use instead and the docs are not very helpful in this regard.

just a tip: in es6 {promise: promise} as the following shorcut : {promise} — Nathan Gouy

Gaurav Gaurav · Accepted Answer · 2018-06-05T17:36:46

DS.PromiseObject proxies the result to its content field. If you pass in just a string, you can retrieve it using {{result.imageUrl.content}}. However, if you return an object, a call to {{result.imageUrl.image}} will use the proxy, so that when you get the image it will be mapped to content.image.

Personally, I prefer to use ember-concurrency for my async needs:

import { readOnly } from '@ember/object/computed';
import { task } from 'ember-concurrency';

fetchImage: task(function* () {
  return yield 'image.url';
}),

imageUrl: readOnly('fetchImage.lastSuccessful.value')

See the documentation for the ember-concurrency addon to see if it is appropriate for your needs.

Resolve a string from a Ember model computed promise

1 Answers