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

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

1）使用environment - 将所有值存储在config.js和import中。缺点：不确定该数据是否属于环境

2）ES6 POJO，可以导入到应用程序。

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

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

Answer 1

您可以创建服务，并拥有将返回Promise的方法（loadData），并将使用您的JSON数据和服务中的更新属性进行解析。你需要在beforeModel钩子中调用loadData，在所有的promises解决后，它才会移动到模型钩子。

Refer twiddle basic demonstration

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

路由/的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()]);
  }    
});

控制器/ application.js中

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

模板/ application.hbs

{{myService.defaultHeaderModel.one}}

在Ember App中存储/加载静态的正确方法

1 个答案: