Вложенные маршруты, отображаемые в одном и том же разрыве шаблона/выхода на кнопку браузера

У меня есть иерархия вложенных маршрутов, которая мне нужна для моего приложения для отслеживания выбора модели пользователя. Я пытаюсь использовать основной шаблон приложения и каждый рендеринг маршрута в одну розетку на этом шаблоне. Это работает, когда я перемещаю иерархию маршрутов от родителя к дочерней.

Однако, как только вы нажмете кнопку "Назад назад", чтобы вернуться к иерархии маршрутов, родительский маршрут 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/

Есть ли способ заставить повторную визуализацию, или я собираюсь сделать это неправильно?

Ответы

Ответ 1

Вы ошибетесь.

Эмбер зависит от иерархии вложенных точек, которые соответствуют иерархии маршрутов. Таким образом, каждый раз, когда вы нажимаете ссылку, которая ведет вас к детскому маршруту, дочерний маршрут должен отображаться в виде выходного файла в его родительском шаблоне. Если вы всегда визуализируетесь в одном шаблоне и розетке, Ember не сможет правильно обновлять выходы при повторном перемещении по иерархии маршрутов. (Надеюсь, это имеет смысл.)

Чтобы избежать этой проблемы, хорошим правилом является использование параметра into для отображения шаблонов, которые вы управляете за пределами иерархии маршрутов. Например, я использую его для рендеринга модальных представлений, у которых нет URL-адреса, и который я ругаю вручную. В иерархии представлений вы почти всегда можете избежать использования into. Например, если вам нужно отобразить несколько шаблонов с отдельным контроллером, вы можете использовать помощник {{render}} в своем шаблоне вместо вызова render в вашем маршруте.

В этом случае самое простое решение, вероятно, должно соответствовать вашему вложенности маршрутов для размещения вашего шаблона. Ваш маршрут animals/index и pets - это действительно братья и сестры, а не parent-child, а также для 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>