ネストされたルートは、ブラウザのバックボタンで同じテンプレート/アウトレットブレークにレンダリングされます。

Question

ユーザーモデルの選択を追跡するためにアプリケーションに必要なネストされたルート階層があります。私は、メインのアプリケーションテンプレートを使用して、各ルートをそのテンプレート上の単一のアウトレットにレンダリングさせようとしています。これは、ルート階層を親から子へと横断するときに機能します。

しかし、ブラウザの戻るボタンをクリックしてルート階層を元に戻すと、親ルートのrenderTemplateフックは起動しません。この結果、子供はアウトレットから引き離され、何もそれに戻されることはありません。テンプレートと

App = Ember.Application.create({}); 

App.Router.map(function(){ 
    this.resource("animals", function(){ 
     this.resource("pets", function(){ 
       this.route('new') 
     }) 
    }) 
}); 
App.PetsView = Ember.View.extend({ 
    templateName : 'wild/pets' 
}); 
App.AnimalsRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render({ 
    into: "application", 
    outlet : "A" 
}) 
    }}); 
App.PetsRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
this.render({ 
    into: "application", 
    outlet : "A" 
})}}); 

App.PetsNewRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
this.render({ 
    into: "application", 
    outlet : "A" 
})}}); 

：

は、ここでの例です

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>{{#linkTo "animals"}}Hello from Ember.js</h1>{{/linkTo}} 
     {{outlet A}} 
</script> 

<script type="text/x-handlebars" data-template-name="animals"> 
    {{#linkTo "pets"}}This is animals list{{/linkTo}} 
</script> 
<script type="text/x-handlebars" data-template-name="wild/pets"> 
    {{#linkTo "pets.new"}}This is pets list{{/linkTo}} 
</script> 

<script type="text/x-handlebars" data-template-name="pets/new"> 
    This is pet creation 
</script> 

そして、ここでは、このコードでjsfiddleです。リンクをクリックして経路をたどり、ブラウザの戻るボタンをクリックすると、アプリケーションテンプレートは何も出力されずにレンダリングされます。

http://jsfiddle.net/Wq6Df/3/

再描画を強制する方法はありますか、私は間違った方法このことについてつもり？

Answer 1

あなたは間違った方向に向かっています。

Emberは、ルート階層と一致するネストされたアウトレットの階層に依存します。だからあなたが子供のルートに行くリンクをクリックするたびに、子供のルートは、親のテンプレート内のアウトレットにレンダリングする必要があります。常に同じテンプレートとアウトレットにレンダリングすると、ルート階層をバックアップするときに、Emberはアウトレットを適切に更新できなくなります。

この問題を回避するには、経路階層外で管理しているテンプレートをレンダリングする場合にのみintoオプションを使用することをお勧めします。たとえば、私はURLを持たず、手作業で解体するモーダルビューのレンダリングに使用します。ビュー階層内では、ほとんどの場合、intoの使用を避けることができます。たとえば、別のコントローラで複数のテンプレートをレンダリングする必要がある場合は、renderをルートに呼び出す代わりに、{{render}}ヘルパーをテンプレート内で使用できます。

この場合、最も簡単な解決法は、おそらくネストしたルートをテンプレートの入れ子に一致させることです。 animals/indexルートとpetsは実際には親子ではなく、pets/listとpets/newでも同じです。実際にはこれがデフォルトですが、やや隠された動作です：petsルートの代わりに実際にpets/indexを使用してリストをレンダリングする必要があります。テンプレートと

App = Ember.Application.create({}); 

App.Router.map(function(){ 
    this.resource("animals", function(){ 
     // this.route("index"); at path /animals is implicit 
     this.resource("pets", function(){ 
       // this.route("index"); at path /animals/pets is implicit 
       this.route("new") 
     }) 
    }) 
}); 

// You don't really need any of these route definitions now; 
// I'm including them for clarity 
App.AnimalsRoute = Ember.Route.extend(); 
App.AnimalsIndexRoute = Ember.Route.extend(); 

App.PetsRoute = Ember.Route.extend(); 
App.PetsIndexRoute = Ember.Route.extend(); 
App.PetsNewRoute = Ember.Route.extend(); 

// Not sure why you need to use a custom template name here, 
// but it should work fine 
App.PetsView = Ember.View.extend({ 
    templateName : 'wild/pets' 
}); 

：

<!-- animals gets rendered into this outlet --> 
<script type="text/x-handlebars" data-template-name="application"> 
    <h1>{{#linkTo "animals"}}Hello from Ember.js</h1>{{/linkTo}} 
    {{outlet}} 
</script> 

<!-- animals/index and pets get rendered into this outlet --> 
<script type="text/x-handlebars" data-template-name="animals"> 
    {{outlet}} 
</script> 

<!-- no outlet here because animals/index has no child routes --> 
<script type="text/x-handlebars" data-template-name="animals/index"> 
    {{#linkTo "pets"}}This is animals list{{/linkTo}} 
</script> 

<!-- pets/index and pets/new get rendered into this outlet --> 
<script type="text/x-handlebars" data-template-name="wild/pets"> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="pets/index"> 
    {{#linkTo "pets.new"}}This is pets list{{/linkTo}} 
</script> 

<script type="text/x-handlebars" data-template-name="pets/new"> 
    This is pet creation 
</script>