CODEWITHSUNDEEP
ember.js
Ihor Korotenko
Ihor Korotenko

Reputation: 906

The proper way to store/load statics in Ember App

currently I'm thinking of the way to load statics into my Ember app. The problem:

I have app branded logo, app name, app title (browser tab label), texts for routes etc. What I'm doing now is the following:

 model() {
   let defaultHeaderModel = {
   logo: '/img/logo-cloud.svg',
   brand: {
     name: 'CloudCenter',
     logo: '/img/logo-cloud.svg'
   },
   userLinks: [{
     text: 'Logout',
     route: 'logout'
   }],
   navigation: [{
     text: 'Login',
     route: 'login'
   }]
 };
}

As you can see all of the values are hardcoded. What I'd like to do is to somehow load that "statics" and use them through some variables. For ex: header.logo = resources.logo. My thoughts:

1) Use environment - store all of that values in the config.js and import it where needed. Cons: not sure if that data belongs to environment

2) ES6 POJO which can be imported to the app.

3) .json and some staticsService which will load .json file and through it I will have access to that values.

Are there any standardized approach to do such things? Or maybe better suggestions?

Upvotes: 2

Views: 67

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

You can create service, and have method(loadData) which will return Promise and will be resolved with your JSON data and update property in service. You need to call loadData in beforeModel hook, after the all the promises resolved only then it will move to model hook.

Refer twiddle basic demonstration

services/my-service.js

import Ember from 'ember';
export default Ember.Service.extend({
  defaultHeaderModel:{},
  loadData(){
    var myServiceDataLoadPromise = Ember.RSVP.Promise.resolve({one:1});
    myServiceDataLoadPromise.then(result =>{
      this.set('defaultHeaderModel',result);
    });
    return myServiceDataLoadPromise;
  }
});

routes/application.js
inside beforeModel hook, you can load service with data, it can be done any of the route which requires data.

import Ember from 'ember';
export default Ember.Route.extend({
  myService: Ember.inject.service(),
  beforeModel()
  {
    return Ember.RSVP.all([this.get('myService').loadData()]);
  }    
});

controllers/application.js

import Ember from 'ember';
export default Ember.Controller.extend({
  myService: Ember.inject.service(),
  appName: 'Ember Twiddle'
});

templates/application.hbs

{{myService.defaultHeaderModel.one}}

Upvotes: 1

Related Questions