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>

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

1 个答案: