Update: Unable to update computed property of controller from computed property of a service that has a promies

Question

power-select]1. The options i pass to power select comes from a service. The option array has duplicate values which i try to remove in my controller. I have made a twiddle put since it ember-twiddle does not support addonss (ember-power-select) till now. I have modified it little bit Ember twiddle

The comment code in twiddle is what I have on desktop. This code works in tweedle but does not work on my computer.

Issue: dropDown value is not visible on template

    import Ember from 'ember';
    const {
      get,
      set,
      computed
    } = Ember;
    export default Ember.Service.extend({

      locations: computed(function(){
        var self = this;

        return get(this,'store')
            .findAll('store')
            .then(stores =>{
                let locs = stores.map(store => {
                     return get(store,'adminAreaLevel2') +" "+ get(store,'adminAreaLevel1')
            });
                set(self,'locations',locs);
          });

});

And the code in controller is

//Controller
import Ember from 'ember';
const {
  inject: { service },
  computed: { uniq }
}=Ember;

export default Ember.Controller.extend({
   dropData: service('my-service'),
  dropLocation: uniq('dropData.locations')
});

The power-select-code that I cannot include in twiddle

{{#power-select
      options=dropLocation
      selected=selectedLoc
      matcher=locMatcher
      onchange=(action "selectLoc") as |loc|}}
      {{first-caps loc}}
    {{/power-select}}
  {{/bs-form-group}}

UPDATES Hi @Bek thanks for solution some one suggest me same in ember slack community. the problem with this solution is dropLocation: uniq('dropData.locations') does not get updated as uniq does not work with promise array properly. I have come up with ugly solution but it work.

dropLocation: Ember.computed('dropData.locations',function(){

return this.get('dropData.locations')
.then(data => data.uniq()); 
})

Looking for good solution

If you inspect the service with ember inspector, is the data there? By the way, which version of Ember, Ember Data, Ember CLI, Ember Power Select, etc.. are you using? — Pedro Rio

Bek Bek · Accepted Answer · 2016-01-05T15:37:27

you cannot observe change on promise itself you can use PromiseObject (or PromiseArray) to wrap your promise so that it is observable.

var promise = Ember.RSVP.resolve({ name: 'mario' });
var object = Ds.PromiseObject({ promise });

now in your template you can use it like:

{{object.name}} // mario

make sure that your promise returns object not primitive (or array for PromiseArray).

in your case it should look like this:

locations: computed(function(){
    var promise = get(this,'store')
        .findAll('store')
        .then(stores =>{
            let locs = stores.map(store => {
                 return get(store,'adminAreaLevel2') +" "+ get(store,'adminAreaLevel1')
            });
            return locs;
        });
    return DS.PromiseArray.create({ promise });
});

Update: Unable to update computed property of controller from computed property of a service that has a promies

1 Answers