Question

我的用例：应用程序有一个标题，显示当前用户的名字。这个标题在所有页面上都是相同的。

当用户登录时，用户数据从JSON API加载到商店中。

现在，我如何从Store访问此数据以在每个页面上使用它？

一种选择是从路线传递它：

{{app-header user=model}}

但是我必须在所有路线中使用相同的模型，而且还无法使用任何其他路线？一个（据说是可重用的）组件如何期望我调整每个路由到它的数据结构？

另一个选择是组件总是自己从Store加载数据，但这似乎非常不推荐，实际上很难在没有任何适当指导的情况下为我做。我设法发现服务注入方法（组件中的store: Ember.inject.service()），但仍无法使组件正确显示模板中存储的数据。

当我使用时：

name: () => {
    return this.store.peekRecord('user', 1).get('name');
  }

然后模板中的{{name}}呈现函数定义，而不是它返回的内容。

当我使用时：

 name: Ember.computed(() => {
    return this.store.peekRecord('user', 1).get('name');    
  })

然后{{name}}呈现：

你能解释一下这是一个好方法吗？除了路线模型之外，application.js中是否定义了一些“主模型”？我是否应该将相同的数据传递给每个路径中的组件？任何信息或建议将不胜感激。

Answer 1

您可以尝试使用服务（guide here）。

// app/services/store.js
import DS from 'ember-data';
export default DS.Store.extend({});

// app/services/user-service.js
import Ember from 'ember';
export default Ember.Service.extend({
  store: Ember.inject.service(),
  user: Ember.computed(function() {
    return this.get('store').findRecord('user', ':id');
  })
});

然后，在所有其他组件，控制器和路由中，您可以访问该服务。

// Inside a controller
export default Ember.controller.extend({
  userService: Ember.inject.service(),

  firstName: Ember.computed.alias('userService.user.firstName')
});

您的模板现在可以使用名字，甚至用户对象本身。

{{userService.user.firstName}}
OR
{{firstName}}

Answer 2

第一种方法，（将其保留在应用程序路径中）

1.在应用程序路径模型钩子中定义它 - 在单个路径中引用多个模型。（https://guides.emberjs.com/v2.9.0/routing/specifying-a-routes-model/#toc_multiple-models）
2.如果在其他路线中需要，则可以通过modelFor方法访问已解决的父路线模型。（http://emberjs.com/api/classes/Ember.Route.html#method_modelFor）

第二种方法，（服务）

与@devman一样，你可以在service中加载它并注入并在任何需要的地方获取它。

 userService:Ember.inject.service();
 name: Ember.computed.alias('userService.name')

在Ember 2.8.0

2 个答案: