Der richtige Weg, um Statiken in Ember App

Question

zu speichern/zu laden, denke ich derzeit über die Art, wie man statische Daten in meine Ember App laden kann. Das Problem:

Ich habe App Markenlogo, Name der App, App-Titel (Browser-Tab-Label), Texte für Routen usw. Was ich mache jetzt ist die folgende:

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' 
    }] 
}; 
} 

Wie Sie kann sehen, dass alle Werte fest codiert sind. Was ich tun möchte, ist irgendwie diese "Statik" zu laden und sie durch einige Variablen zu benutzen. Zum Beispiel: header.logo = resources.logo. Meine Gedanken:

1) Verwenden Sie environment - Speichern Sie alle, dass die Werte in der config.js und import es, wo nötig. Nachteile: nicht sicher, ob diese Daten zur Umgebung gehören

2) ES6 POJO, die in die App importiert werden können.

3) .json und einige staticsService, die .json Datei laden und durch sie werde ich Zugriff auf diese Werte haben.

Gibt es einen standardisierten Ansatz, um solche Dinge zu tun? Oder vielleicht bessere Vorschläge?

Answer 1

Sie können einen Dienst erstellen und haben eine Methode (loadData), die Promise zurückgibt und mit Ihren JSON-Daten und der aktualisierten Eigenschaft im Dienst aufgelöst wird. Sie müssen loadData in beforeModel Hook aufrufen, nachdem alle Versprechungen nur dann gelöst haben, wird es zum Modell Hook verschieben.

Refer twiddle basic demonstration

Dienste/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; 
    } 
}); 

Routen/application.js
innen beforeModel Haken Sie Service mit Daten geladen werden kann, kann es eine der Route erfolgen, die benötigt Daten.

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

Controller/application.js

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

templates/application.hbs

{{myService.defaultHeaderModel.one}}