如何从 Ember 路由中的 URL 获取 ID？答案

【问题标题】：How can I get the Id from the URL in an Ember Route?如何从 Ember 路由中的 URL 获取 ID？
【发布时间】：2016-12-20 11:43:00
【问题描述】：

我有两个面板显示，其中我在左侧显示项目列表，然后在右侧显示有关所选项目的详细信息（使用嵌套路由）。

我的路线是这样的：

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

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

当一个项目被选中时，它被设置为“活动”（模型上的临时属性 - 默认为 false）并通过 bakery/cakes 路线上的操作突出显示。然后详细信息显示在右侧。

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

理想情况下，我想在 bakery/cakes 路由中使用 afterModel() 钩子将该项目再次设置为活动状态，但我无法获得能够执行此操作的 Id。

我尝试了以下方法：

接受来自here的回答
This 问题对我没有帮助，因为模型将重新加载，并且我的“活动”属性将为 false，所以我不能只选择 where active = true。

我使用的是 ember 2.5.0。谢谢。

【问题讨论】：

详细路线，可以试试beforeModel(transition){ //you can access using transition.params.details.id with proper check }
有什么方法可以让我从 cakes 路线访问它吗？
我不确定，请在蛋糕路线模型挂钩中尝试一下。
不，这在蛋糕中不起作用，和之前的模型一样，细节路线还没有加载，但是已经被之后的模型加载了。尝试从 transition.params 中获取正确的对象会导致问题，因为我看到了以下对象： - 应用程序 - 已验证 - authenicated.bakery - authenticated.bakery.cakes - authenticated.bakery.cakes.detail
authenticated.bakery.cakes.detail 对象确实将 id 作为属性，只是将其从 transition.params 对象中取出会导致我出现问题

标签： ember.js path routes

【解决方案1】：

我想知道以不同的方式构建您的结构是否会更好（与我假设您正在做的事情不同）。

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

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return this.store.findAll('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 路由上，加载特定蛋糕以及蛋糕列表；

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let cakes= this.modelFor('authenticated.bakery.cakes');
    return Ember.RSVP.hash({
      cakes: cakes,
      cake: cakes.findBy('id', params.id)
    });
  }
});

最后在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>

【讨论】：

谢谢，包装链接对我们来说已经足够了！

【解决方案2】：

作为另一种选择，在正确的路由挂钩上更改您的模型活动标志应该可以工作。（我想无论如何，我自己还没有这样做过。）在你的authenticated.bakery.cakes.detail 路线上；

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

【讨论】：