在 Ember 应用程序中 store/load 统计的正确方法

Question

目前我正在考虑将静态加载到我的 Ember 应用程序中的方法。问题：

我有应用品牌徽标、应用名称、应用标题（浏览器选项卡标签）、路线文本等。我现在正在做的是：

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

如您所见，所有值都是硬编码的。我想做的是以某种方式加载 "statics" 并通过一些变量使用它们。例如：header.logo = resources.logo。我的想法：

1) 使用 environment - 将所有这些值存储在 config.js 和 import 中需要的地方。缺点：不确定该数据是否属于环境

2) ES6 POJO 可导入应用

3) .json 和一些 staticsService 将加载 .json 文件并通过它我可以访问该值。

有没有标准化的方法来做这些事情？或者更好的建议？

Answer 1

您可以创建服务，并拥有方法 (loadData)，它将 return 承诺并将使用您的 JSON 数据解析并更新服务中的属性。你需要在 beforeModel hook 中调用 loadData，在所有的 promises resolved 之后它才会移动到 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
在 beforeModel 钩子里面，你可以用数据加载服务，它可以完成任何需要数据的路由。

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}}

在 Ember 应用程序中 store/load 统计的正确方法

The proper way to store/load statics in Ember App

ember.js