將Ember JS轉換爲嵌套路由，其中​​所有路由均爲視圖中的動態段

Question

我們正在使用EmberJS編寫應用程序。然而，我們仍然對這個框架有所瞭解，並且我們很難解決一些看似簡單的問題。

該模型非常簡單，有3個模型：隊列，任務和圖像。我們爲所有路由和路由使用動態URI段，這些模型嵌套在表單中：：queue_id /：task_id /：image_id。

的路由配置是這樣的：

App.Router.map(function() { 
    this.resource('queue', {path: ':queue_id'}, function() { 
     this.resource('task', {path: ':task_id'}, function() { 
     this.resource('image', {path: ':image_id'}); 
     }); 
    }); 
} 

而在HTML的地方，我們有這個簡單的模板，通過從任務的所有圖像進行迭代：

{{#each task.images}} 
    <li> 
     {{#view App.ThumbnailView.contentBinding="this"}} 
     <img {{bindAttr src="thumbnail.url"}} /> 
     {{/view}} 
    </li> 
{{/each}} 

這裏是縮略圖視圖代碼：

App.ThumbnailView = Ember.View.extend({ 
    tagName : 'a', 
    click : function(e) { 
     var task = //assume this value exists; 
     var queue = //assume this value exists; 
     var image = //assume this value exists; 

     this.get('controller.target.router').transitionTo('image', queue, task, image); 
    } 
}); 

最後，這裏是我們的ImageRoute：

App.Image = Ember.Object.extend(); 
App.Image.reopenClass({ 
    find : function(image_id) { 
     //This is where I set a breakpoint 
     console.log(image_id); 
    } 
}); 

App.ImageRoute = Ember.Route.extend({ 
    model : function(params) { 
     //image_id is the last uri segment in: #/1/1/1 
     return App.Image.find(params.image_id); 
    } 
}); 

問題： 到this.get('controller.target.router').transitionTo()調用似乎是工作。我可以看到，當我點擊其中一個縮略圖視圖時，URL會發生變化（例如從/ 1/1/2變爲/ 1/1/3）。但是，我沒有看到UI中的任何狀態更改。另外，我放置斷點的那一行似乎沒有被觸發。但是當我刷新頁面時，它運行良好。

我的轉換代碼有問題嗎？

謝謝。

Answer 1

有兩點需要注意：

首先，取代

this.get('controller.target.router').transitionTo('image', queue, task, image); 

用途：

this.get('controller').transitionToRoute('image.index', queue, task, image); 

這可能不會改變的行爲，但它更灰燼地道。

的第二件事是：

內部轉換不會觸發航線model鉤，因爲灰燼假定您傳遞模型與過渡一起，因此無需調用model掛鉤，因爲你已經通過了該模型。

這就是爲什麼你的斷點沒有被觸發，find沒有被調用（因爲它不應該）。

我沒有足夠的信息來查找您的問題，但是如果我從頁面刷新工作和內部轉換沒有的事實猜測傳遞到transitionTo的對象之間存在不一致以及從model掛鉤返回什麼。

您應該將確切的對象傳遞給transitionTo作爲model掛鉤返回的對象。

如果你正在做的：

this.get('controller').transitionToRoute('image.index', queue, task, image); 

和它不工作，那麼可能是與任何queue，task，或image模型你逝去。

所以這個：

var task = //assume this value exists; 
    var queue = //assume this value exists; 
    var image = //assume this value exists; 

是不是非常有幫助，因爲它可能是問題的所在。