存储来自ajax调用的全局变量

Question

I have a list of years in an array format [2018, 2019, 2020] that is returned from my back end. Right now, i'm using a setup controller to make the ajax call and set it as a value to be used by my ember-power-select. However, I just need this to be done once, like on application load and have it as a global variable, instead of everytime the controller loads since this array will rarely change.

How should I go about this ?

Answer 1

Forget about globals. What you need is application-wide availability, which you get by using a services . A service is created as a singleton (by default) by the application's dependency injection container, and as such, is available anywhere you should choose to inject it.

Check out this twiddle I put together for you. I've made a little mock service that uses a cached value when available. To me, this is more straightforward than using a computed property that is promise aware (although there are implementation available).

export default Ember.Service.extend({
  loadDates(){
    if(this.dates){
      return Ember.RSVP.resolve(this.dates);
    }else{
      return this._loadAndCacheDatesFromApi(); 
    }
  },
  _loadAndCacheDatesFromApi(){
    // this is actually an api call in your case
    return new Ember.RSVP.Promise((resolve) => {
      setTimeout(() => {
        this.set('dates', ['2019', '2020', '2021']);
        resolve(this.dates);
      }, 5000);
    });
  }
});

We want our loadDates to behave the same whether it's loading from the api or loading from the cache, so we make the function always return a promise (using the resolve function in the cache case). I've used a setTimeout just for illustration...you'd actually make the api call in your case here, and on return, store the dates as a property on the service.

Now, any route that wants to load this would inject the service (via the Ember dependency injection framework), and then simply make the service call in the setupController

import { inject as service } from '@ember/service';
export default Ember.Route.extend({
  dateService: service() // this is shorthand for service('date-service'),
  setupController(controller, model){
    let dateService = this.get('dateService');
    return dateService.loadDates().then((dates) => {
      controller.set('dates', dates);    
    });
}

As you see here, it's opaque to the calling code whether this code hits a cache or is returned from the api. It's important to note that this works because services are singletons (ie only one instance created on first use). That way, properties that are set are truly shared. A refresh to the application would obviously lose the value (which you could store in local storage if you needed more long term storage).