Ember.js - 在嵌套路由變化

Question

呈現不同的佈局我現在有這樣一個路徑：

/圖像

呈現圖像的網格。當一個用戶點擊一個圖像I過渡到嵌套路線：

/圖片/：image_id

顯示大版本的圖像的。

我想顯示與網格圖像接壤的大圖像，並且比它們在網格視圖中顯示的要小，但我不確定在燼體中有什麼好方法。

網格的看法是這樣的：

* * * * * * 
    * * * * * * 
    * * * * * * 

當一個被點擊會是這樣的觀點：

. . . . . 
    . _______ . 
    . |  | . 
    . |  | . 
    . |_______| . 
    . . . . . 

* = medium thumbnails 
. = small thumbnails 
box = large image 

我想到了創建一個ImagesController動作來處理時圖像在網格中被選中。然後，圖像句柄模板中的if條件會更改圖像佈局，併爲大圖像提供出口。類似：

<script type="text/x-handlebars" data-template-name='images'> 
    {{#if isGridView}} 
    Draw each image in a grid 
    {{else}} 
    Draw small images 
    {{outlet}} <-- for large image 
    {{/if}} 
</script> 

我還想到使圖像單圖像的依賴所描述here，然後使用從圖像車把模板圖像數據，以創建通過訪問controllers.images佈局。

將視圖用於此？謝謝您的幫助。

Answer 1

這樣做的方法之一是通過創建2個模板。一個用於網格視圖，另一個用於邊界視圖。

您可以嵌套路線並覆蓋renderTemplate方法以在單擊項目時替換gridview。 Here is a demo for that。

App.PhotoRoute = Em.Route.extend({ 
    renderTemplate: function() { 
    this.render('photo', { 
     into: 'application' 
    }); 
    } 
}); 

另一種方法是保持路線平坦並修改路徑，使路線看起來好像是嵌套的。這樣，模板不會嵌套。 Here is a demo for that。

App.Router.map(function() { 
    this.route('photos', {path:'/photos'}); 
    this.route("photo", { path: "/photos/:photo_url" }); 
});