Question

我有一个两个面板显示，我在左边显示一个项目列表，然后是右边所选项目的详细信息（使用嵌套路径）。

我的路线如下：

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

当选择一个项目时，它被设置为＆＃34;活动＆＃34; （模型上的临时属性 - 默认为false）并通过面包店/蛋糕路线上的操作突出显示。然后细节显示在右侧。

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

理想情况下，我想在面包店/蛋糕路线中使用afterModel（）挂钩将该项目重新设置为有效，但我无法让Id能够执行此操作

我尝试过以下方法：

here
This问题无法帮助我，因为模型会重新加载，而我的活动会被激活。属性将为false，因此我无法选择active = true。

我使用的是ember 2.5.0。感谢。

Answer 1

我想知道建筑结构有点不同（从我假设你做的事情）是否更好。

首先，加载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>类将自动应用;

pre

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

如何从Ember Route中的URL获取Id？

2 个答案: