Các tuyến đường lồng nhau hiển thị vào cùng một mẫu/điểm ngắt trên nút quay lại trình duyệt, nhấp vào

Question

Tôi có một phân cấp tuyến đường lồng nhau mà tôi cần cho ứng dụng của mình để theo dõi các lựa chọn mô hình người dùng. Tôi đang cố gắng sử dụng một mẫu ứng dụng chính và có mỗi tuyến đường render vào một ổ cắm duy nhất trên mẫu đó. Điều này hoạt động khi tôi duyệt qua phân cấp tuyến đường từ cha mẹ sang con.

Tuy nhiên, khi bạn nhấp vào nút quay lại trình duyệt để sao lưu hệ thống phân cấp tuyến đường, tuyến đường mẹ renderTemplate hook không kích hoạt. Điều này dẫn đến việc đứa trẻ chưa được khám phá ra khỏi cửa hàng và không có gì được trả lại vào nó.

Dưới đây là một ví dụ:

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

Với các mẫu:

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

Và đây là một jsfiddle với mã này. Nhấp vào các liên kết để duyệt qua các tuyến đường, sau đó nhấp vào nút quay lại trình duyệt và mẫu ứng dụng được hiển thị mà không có gì được nối vào ổ cắm của nó.

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

Có cách nào để buộc một tái render, hay tôi sẽ về vấn đề này một cách sai lầm?

Answer 1

Bạn đang đi sai đường.

Ember phụ thuộc vào hệ thống phân cấp của các cửa hàng lồng nhau phù hợp với phân cấp tuyến đường. Vì vậy, mỗi khi bạn nhấp vào một liên kết đưa bạn đến một tuyến đường con, tuyến đường con sẽ hiển thị trong một lối thoát trong mẫu của cha mẹ. Nếu bạn luôn đưa vào cùng một mẫu và đầu ra, thì Ember sẽ không thể cập nhật các cửa hàng đúng cách khi bạn di chuyển ngược lên phân cấp tuyến đường. (Tôi hy vọng điều đó có ý nghĩa.)

Để tránh vấn đề này, nguyên tắc chung là chỉ sử dụng tùy chọn into để hiển thị mẫu bạn đang quản lý bên ngoài phân cấp tuyến đường. Ví dụ: tôi sử dụng nó để hiển thị các chế độ xem phương thức không có URL và tôi bị rách theo cách thủ công. Trong hệ thống phân cấp chế độ xem, bạn hầu như luôn có thể tránh sử dụng into. Ví dụ: nếu bạn cần hiển thị nhiều mẫu với bộ điều khiển riêng, bạn có thể sử dụng trình trợ giúp {{render}} trong mẫu của mình thay vì gọi render trong tuyến đường của bạn.

Trong trường hợp này, giải pháp dễ nhất có thể phù hợp với tuyến đường của bạn đang lồng vào khuôn mẫu của bạn. Tuyến đường animals/index và pets của bạn thực sự là anh chị em, không phải là cha mẹ-con và giống nhau cho pets/list và pets/new của bạn. Trên thực tế, đây là hành vi mặc định nhưng có phần ẩn: bạn thực sự nên sử dụng pets/index để hiển thị danh sách thay vì tuyến đường mẹ 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' 
}); 

Với các mẫu:

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