Access hasMany by Id in a template


#1

So I have a model defined as:

properties: DS.hasMany('property')

Is it possible to access the properties by the id of the property?

I’m thinking in my controller I can create something like:

myProperties: Ember.computed(function() {
    return this.get('model.properties').then((properties) => {
        return properties.reduce(function(previous, prop) {
            previous[prop.id] = prop;
            return previous;
        }, {});
    }
})

My main goal is to access the properties in my template like this:

{{myProperties.id.someProperty}}

I’m getting nothing printed because I think the promise still hasn’t resolved yet. What is the correct way of doing this? Thanks.

So I found out I can do this (setting the myProperties again after I process the promise), but it seems wrong is there a better way?

myProperties: Ember.computed(function() {
return this.get('model.properties').then((properties) => {
    let obj =  properties.reduce(function(previous, prop) {
        return previous[prop.id] = prop;
    }, {});
   this.set('myProperties', obj);
}})

Also this:

    myProperties: Ember.computed(function() {
        let PromiseObject = Ember.ArrayProxy.extend(Ember.PromiseProxyMixin);
        return PromiseObject.create({promise: this.get('model.properties')});
    })

then in my template I can use ember-composable-helper addon and do

{{get (find-by 'id' 'myId' myProperties) 'someProperty'}}

But none of these solutions seem right. Is there really no way to resolve a promise in the template?

Ideally the best would be:

{{model.properties.myId.someProperty}}

#2

I think I figured out the proper solution, instead of dealing with promises on the hasMany, I have my backend side load the hasMany data in the payload so ember will resolve the model in the route and it’ll be ready to process in the controller, components, etc…