EmberルートのURLからIDを取得するにはどうすればよいですか？

Question

私は2つのパネルディスプレイを持っています。左側にはアイテムのリストが表示され、右側には選択したアイテムの詳細が表示されます（ネストされたルートを使用）。

私のルートは次のようになります。

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

のように見えます - デフォルト偽です）、ベーカリー/ケーキのルート上のアクションで強調表示されます。詳細が右側に表示されます。

ページを更新すると、アイテムは強調表示されなくなりますが、詳細は引き続き表示されます。

理想的には、ベーカリー/ケーキのルートでafterModel（）フックを使用して、そのアイテムを再度アクティブに設定したいと思いますが、Idを取得することができませんでした。

は、私が試した次

• 受け入れ答え

• Thishereからモデルが再ロードされているだろうと疑問が私を助けていないと私の「アクティブ」プロパティがそうfalseになります私は単にアクティブ=真を選択することはできません。

私はember 2.5.0を使用しています。ありがとう。

Answer 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> 

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