Ember.js-在嵌套的路線更改上呈現不同的布局

Question

我目前有一條路線，例如：

/圖片

呈現圖像網格。 當用戶點擊圖片時，我會轉到嵌套路線：

/圖像/：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>

我還想到使圖像作為所述的單圖像的依賴性在這里 ，然后使用從圖像車把模板圖像數據，以創建通過訪問controllers.images布局。

視圖對此有什么用嗎？ 謝謝您的幫助。

Answer 1

一種方法是創建2個模板。 一個用於網格視圖，另一個用於邊框視圖。

您可以嵌套路線並重寫renderTemplate方法，以在單擊項目時替換gridview。 這是一個演示 。

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

另一種方法是保持路線平坦並修改路徑，以使路線看起來像是嵌套的。 這樣，模板就不會嵌套。 這是一個演示 。

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