Zagnieżdżone trasy renderujące do tego samego szablonu/przerw w gniazdach na przycisku wstecz Wstecz Kliknij

Question

Mam zagnieżdżoną hierarchię trasy, której potrzebuję do mojej aplikacji do śledzenia wyboru modelu użytkownika. Próbuję użyć głównego szablonu aplikacji, a każda trasa jest renderowana do jednego gniazda w tym szablonie. Działa to tak, jak przechodzę w dół hierarchii tras od rodzica do dziecka.

Jednak po kliknięciu przycisku wstecz przeglądarki, aby wrócić do hierarchii tras, trasa rodzicielska renderHead hook nie uruchamia się. Powoduje to odłączenie dziecka od gniazdka i nic z powrotem do niego.

Oto przykład:

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" 
})}}); 

Z szablonów:

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

A oto jsfiddle z tym kodem. Kliknij łącza, aby przejść przez trasy, a następnie kliknij przycisk wstecz przeglądarki, a szablon aplikacji zostanie wyświetlony bez niczego podłączonego do gniazda.

http://jsfiddle.net/Wq6Df/3/

Czy istnieje jakiś sposób, aby wymusić ponowne renderowanie, czy będę na ten temat niewłaściwy sposób?

Answer 1

Podejdziesz do tego w niewłaściwy sposób.

Ember zależy od hierarchii zagnieżdżonych gniazd, które pasują do hierarchii trasy. Tak więc za każdym razem, gdy klikniesz na link prowadzący do ścieżki podrzędnej, trasa podrzędna powinna zostać wyrenderowana do gniazdka w szablonie rodzica. Jeśli zawsze będziesz renderować do tego samego szablonu i wylotu, Ember nie będzie w stanie poprawnie zaktualizować gniazd po przejściu z powrotem do hierarchii tras. (Mam nadzieję, że ma to sens).

Aby uniknąć tego problemu, dobrą zasadą jest użycie opcji into do renderowania szablonów zarządzanych poza hierarchią tras. Na przykład używam go do renderowania widoków modalnych, które nie mają adresu URL i które zburzę ręcznie. W hierarchii widoku prawie zawsze można uniknąć używania into. Na przykład, jeśli potrzebujesz renderować więcej niż jeden szablon za pomocą osobnego kontrolera, możesz użyć pomocnika {{render}} w swoim szablonie zamiast wywoływać render w swojej trasie.

W tym przypadku najprostszym rozwiązaniem jest prawdopodobnie dopasowanie zagnieżdżenia trasy do zagnieżdżenia szablonu. Twoja trasa animals/index i pets to naprawdę rodzeństwo, a nie rodzic-dziecko, i to samo dla pets/list i Twojego. W rzeczywistości jest to domyślne, ale nieco ukryte zachowanie: naprawdę powinieneś używać pets/index do renderowania listy zamiast trasy macierzystej 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' 
}); 

Z szablonów:

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