Ember.js 如何从余烬路由中的URL获取Id？

我有一个双面板显示屏，在左侧显示项目列表，然后在右侧使用嵌套管线显示选定项目的详细信息

我的路线如下所示：

Router.map(function() {
 this.route('authenticated', {path: '/'}, function() {
  this.route('bakery', function() {
   this.route('cakes', function() {
    this.route('detail', { path: '/:id' });
    });
  });
});
});

我的URL看起来像 http://localhost:3333/bakery/cakes/e34b3ce3

选择某个项目后，该项目将在模型上设置为活动临时属性-默认值为false，并通过烘焙/蛋糕路线上的操作高亮显示。然后，详细信息显示在右侧

如果我刷新页面，该项目将不再突出显示，但仍会显示详细信息

理想情况下，我希望使用bakery/cakes路径中的afterModel钩子将该项目重新设置为活动状态，但我无法获取能够执行此操作的Id

我尝试了以下方法：

接受来自

这个问题对我没有帮助，因为模型将被重新加载，并且我的活动属性将为false，所以我不能只选择active=true的位置

---

我使用的是ember 2.5.0。谢谢。

我想知道是否最好将您的结构设计得与我假设的有所不同

首先，加载authenticated.bakery.cakes路径上的所有蛋糕

其次，在authenticated.bakery.cakes.index模板上显示您的全宽蛋糕列表蛋糕模型将被继承

<div class="full width cake list">
  {{#each model as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{!-- cake photo --}}
      {{cake.name}}
      {{!-- other cake details... --}}
    {{/link-to}}
  {{/each}}
</div>

---

最后，在authenticated.bakery.cakes.detail模板上，显示蛋糕的压缩/窄列表以及特定的蛋糕细节。使用{{link to}}，将自动应用“active”类

<div class="narrow width cake list">
  {{#each model.cakes as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{cake.name}}
    {{/link-to}}
  {{/each}}
</div>

<div class="cake details">
  {{model.cake.name}}
</div>

---

我想知道是否最好将您的结构设计得与我假设的有所不同

首先，加载authenticated.bakery.cakes路径上的所有蛋糕

其次，在authenticated.bakery.cakes.index模板上显示您的全宽蛋糕列表蛋糕模型将被继承

<div class="full width cake list">
  {{#each model as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{!-- cake photo --}}
      {{cake.name}}
      {{!-- other cake details... --}}
    {{/link-to}}
  {{/each}}
</div>

---

最后，在authenticated.bakery.cakes.detail模板上，显示蛋糕的压缩/窄列表以及特定的蛋糕细节。使用{{link to}}，将自动应用“active”类

<div class="narrow width cake list">
  {{#each model.cakes as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{cake.name}}
    {{/link-to}}
  {{/each}}
</div>

<div class="cake details">
  {{model.cake.name}}
</div>

---

作为另一个选项，在适当的管线挂钩上更改模型活动标志应该有效。我想不管怎样，我自己都没有做过。在你的认证.面包店.蛋糕.细节路线上

---

作为另一个选项，在适当的管线挂钩上更改模型活动标志应该有效。我想不管怎样，我自己都没有做过。在你的认证.面包店.蛋糕.细节路线上

---

在详细路由中，您可以尝试beforeModeltransition{//您可以使用transition.params.details.id进行访问，并进行适当的检查}是否有一种方法可以从cakes路由访问它？我不确定，请在cakes路由模型挂钩中进行尝试。不，这在cakes中不起作用，因为在BeforeModel中，详细路由尚未加载，但已加载后的模型。试图从transition.params中获取正确的对象导致了问题，因为我看到了以下对象：-应用程序-已验证-已验证-已验证。bakery-authenticated.bakery-authenticated.bakery-authenticated.bakery.cakes-authenticated.bakery.cakes.detail对象的id作为属性，只是从transition.params对象中获取它导致我在细节路由中出现问题，您可以在模型转换之前尝试{//您可以使用transition.params.details.id进行访问，并进行适当的检查}是否有一种方法可以从cakes路由访问它？我不确定，请在cakes路由模型挂钩中尝试它。不，这在cakes中不起作用，与前一个模型一样，详图管线未加载，但已由后一个模型加载。试图从transition.params中获取正确的对象导致了问题，因为我看到了以下对象：-应用程序-已验证-已验证-已验证。bakery-authenticated.bakery-authenticated.bakery-authenticated.bakery.cakes-authenticated.bakery.cakes.detail对象的id作为属性，只是把它从transition.params对象中去掉就引起了我的问题，到包装的链接对我们来说已经足够了！谢谢，包装的链接对我们来说已经足够了！

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('cakes', params.id);
  },
  afterModel(cake) {
    cake.set('active', true);
  },
  actions: {
    willTransition() {
      this.get('controller.model').set('active', false);
    }
  }
});