13

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

ただし、ブラウザの戻るボタンをクリックしてルート階層に戻ると、親ルートの 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/

再レンダリングを強制する方法はありますか、それとも間違った方法で行っていますか?

4

1 に答える 1

29

あなたはそれについて間違った方法で進んでいます。

Ember は、ルート階層に一致するネストされたアウトレットの階層に依存します。したがって、子ルートに移動するリンクをクリックするたびに、子ルートは親のテンプレート内のアウトレットにレンダリングされます。常に同じテンプレートとアウトレットにレンダリングすると、ルート階層を上に移動したときに Ember がアウトレットを適切に更新できなくなります。（それが理にかなっていることを願っています。）

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

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

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>
于 2013-03-11T02:49:11.680 に答える