Javascript Ember.js-在嵌套管线更改上呈现不同布局

我目前的路线如下：

/图像

渲染图像网格的。当用户单击图像时，我将转换为嵌套路由：

/images/：image\u id

以显示该图像的大版本

我想显示一个大的图像，它与网格图像相邻，并且比网格视图中显示的图像小，但是我不确定在ember中什么是好的方法

网格视图如下所示：

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

单击时的视图类似于：

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

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

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

我考虑创建一个ImagesController操作，以便在选中网格中的图像时进行处理。然后，图像把手模板中的if条件会更改图像布局，并为大图像提供一个出口。比如：

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

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

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

{{#如果是isGridView}
在网格中绘制每个图像
{{else}
绘制小图像
{{outlet}}一种方法是创建两个模板。一个用于栅格视图，另一个用于边界视图

您可以嵌套路由并重写
renderTemplate
方法，以在单击项时替换gridview

另一种方法是保持管线平坦并修改路径，以使管线显示为嵌套管线。这样，模板就不会嵌套

关于第一种方法，我如何获得“PhotoRoute”模板中所有图像的数据？这些是包围大选定图像的小图像所必需的。这与您链接到的演示类似，但当显示大电影图像时，它也会显示与其相邻的小电影。您可以使用“modelFor”从另一条路径访问模型数据。您还可以使用“需要”属性访问其他控制器数据。