嵌套路由渲染到相同的模板/插座中断浏览器后退按钮单击

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