Ember - async computed property or observer?

Question

So I'm new to Ember and trying to work out the best way to set a computed property that depends upon related model data. I'll include the models below FYI.

I want to set the computed property to an asynchronous result (desiredOutcome). My question is how do I this? Or is it more appropriate to use an observer, as in this question.

score: function() {
    var self = this;
    var allscores = this.get('model.scores');

    //Find the scoreRecord that has the appropriate objective id (in this case just 1)
    var scoreRecord = allscores.find(function(item){
        var scoreID = item.get('id');

        return self.store.find('score', scoreID).then(function(scoreRecord){
            var objID = Number(scoreRecord.get('objective.id'));
            if (objID === 1){return true;}
        });
    });

    //Return the scoreRecord's score attribute
    var scoreID = scoreRecord.get('id');
    return this.store.find('score', scoreID).then(function(score){
        var desiredOutcome = score.get('score');
        console.log(desiredOutcome);
        return desiredOutcome;
    });
}.property('[email protected]', 'selectedObjective'),

Apologies for the poor choice of variable names etc...

My models:

student

scores:   DS.hasMany('score', {async: true}),  
name:     DS.attr('string')

objective

name:     DS.attr('string'),
scores:   DS.hasMany('score', {async : true})

score

scoreResult:  DS.attr('number'),
objective:    DS.belongsTo('objective', {async: true}),
student:      DS.belongsTo('student', {async: true})

-------------Update---------------

JSBin here. So what I'd like is to return one of the scores, the 1 or 2 that are being logged in the console, as the computed property "score". But I'm assuming I'm just returning an unresolved promise - Inexperienced with promises - How do I adapt so that it resolves?

--I've also been thinking it might be better for me take a different approach with what I'm trying to do here. I might look into creating a component with a model of the appropriate "score". I'll update with some details if that works out.

should that be model.scores.@each instead of [email protected]? — Kalman
Added to JSBin, but I've broken it! Stopped working when I started putting in fixture data. I've only been using Ember-CLI, can I use DS.FixtureAdapter in JSBin? — rjoxford
yes, but you need to add ember-data.js emberjs.jsbin.com/wafisa/1/edit?html,js,output — Kalman

Arntor Arntor · Accepted Answer · 2017-01-30T12:57:19

As i struggled with the same thing today, it appears the answer is to use DS.PromiseObject .

So first you include it with:

import DS from 'ember-data';

then you create your computed property like:

property: Ember.computed('id', function(){
    return DS.PromiseObject.create({
        promise: this.get('store').findRecord('account', this.get('id')).then((data) => {
            return 'Mr. ' + data.get('name');
        })
    });
})

and finally in your template you can access the result with content (this is the catch) :

{{property.content}}

and that is all :) in this particular case when you change the Id it will resolve and display a new Name.

Ember - async computed property or observer?

2 Answers