ember.js - 单击浏览器后退按钮时，渲染到同一模板/ socket 的嵌套路由会中断

Question

我有一个嵌套的路由层次结构，我的应用程序需要它来跟踪用户模型选择。我正在尝试使用主应用程序模板，并将每个路由渲染到该模板上的单个导出中。当我从父级到子级遍历路由层次结构时，这是有效的。

但是，一旦您单击浏览器后退按钮返回路由层次结构，父路由 renderTemplate Hook 就不会触发。这会导致子进程从 socket 中脱离，并且没有任何内容返回到其中。

这是一个例子:

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 依赖于与路由层次结构相匹配的嵌套导出层次结构。因此，每次您单击将您带到子路由的链接时，子路由都应该呈现到其父模板中的 socket 中。如果您始终渲染到相同的模板和 socket 中，那么当您返回路由层次结构时，Ember 将无法正确更新 socket 。 (我希望这是有道理的。)

要避免此问题，一个好的经验法则是仅使用 into用于渲染您在路由层次结构之外管理的模板的选项。例如，我使用它来渲染没有 URL 且需要手动拆除的模态视图。在 View 层次结构中，您几乎总是可以避免使用 into 。例如，如果您需要使用单独的 Controller 渲染多个模板，则可以使用 {{render}}模板中的助手，而不是调用 render在你的 route 。

在这种情况下，最简单的解决方案可能是将路由嵌套与模板嵌套相匹配。您的animals/index路线和pets确实是 sibling ，不是亲子关系，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>