简体繁体 English

Ember 2 - 在父路线中加载嵌套路线

[英]Ember 2 - Loading Nested Route in parent route

原文 2017-01-18 14:30:53 9 1 ember.js/ ember-data/ ember-router

I have two routes: 我有两条路线：

/users/:user_id (aka user ) /users/:user_id （又名user ）
/users/:user_id/roles (aka user roles ) /users/:user_id/roles （又称user roles ）

I now want to show the user roles within the user route. 我现在想要在user路由中显示user roles 。 I still want to have a separate user roles route. 我仍然希望有一个单独的user roles路由。

When user roles are being loaded within the user route, the page should show the user roles section/template as loading (Because of requests to the server for user_roles should continue to be separate, I don't want to load user_roles (ajax) from within the user route because it will slow down the route loading). 当user roles被在中加载user的路线，该页面应显示user roles的部分/模板loading （因为请求到服务器的user_roles应继续独立，我不希望加载user_roles (ajax)从在user路由中，因为它会减慢路由加载）。

How do I achieve this? 我该如何实现这一目标？

I think I can make an asynchronous component called... user-roles-component , and feed user into it like so: {{user-roles-component user=user}} . 我想我可以创建一个名为... user-roles-component的异步组件，并将user输入其中： {{user-roles-component user=user}} 。 Then I can use this component on both of my routes. 然后我可以在我的两条路线上使用这个组件。 Except that in case of user roles route, I won't be loading model?. 除了在user roles路由的情况下，我不会加载模型？ And I will not be violating DDAU since I will be dealing with user_roles data directly in my component. 我不会违反DDAU，因为我将直接在我的组件中处理user_roles数据。
Or I just make a service called user-roles-service that deals with asynchronous loading of user_roles given the user and also pass it in both routes and render using a custom component that will be in both of the routes. 或者我只创建一个名为user-roles-service ，该user-roles-service处理给定user的user_roles异步加载，并在两个路由中传递它，并使用将在两个路由中的自定义组件进行渲染。

1 个解决方案

I'd create a loading state within your route and load the content of roles once you click in one button/link and pass that received content to your component. 我会在您的路线中创建一个加载状态，并在您单击一个按钮/链接并将收到的内容传递给您的组件后加载角色的内容。

An alternative is to create a loading state in your component as well (and probably the way I'd do). 另一种方法是在组件中创建加载状态（可能就像我做的那样）。 To do that you would receive an Promise from your ajax request (there are several ways to do that: .find() , .query() , ember-ajax , ember-network ). 要做到这一点，你将从你的ajax请求中收到一个Promise （有几种方法可以做到这一点： .find() .query() ， ember-ajax ， ember-network ）。 You would activate the loading state of your component once you click the button/link to load the content, and once the promise is resolved you change the state of your component again. 单击按钮/链接以加载内容后，您将激活组件的加载状态，一旦解决了承诺，您将再次更改组件的状态。

Both ways your component can show its content once it receives the data and you preserve AUDD (Actions Up, Data Down). 一旦接收到数据，组件就可以显示其内容，并保留AUDD（Actions Up，Data Down）。