javascript - Ember.js - 在嵌套路由更改时呈现不同的布局

Question

我目前有这样一条路线:

/图片

渲染图像网格。当用户点击图像时，我会转换到嵌套路由:

/images/:image_id

显示该图像的大版本。

我想显示带有网格图像的大图像，并且比 GridView 中显示的要小，但我不确定在 ember 中有什么好的方法。

GridView 是这样的:

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

点击后的 View 是这样的:

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

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

我考虑创建一个 ImagesController 操作来处理何时选择了网格中的图像。然后图像 Handlebars 模板中的 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然后使用图像 Handlebars 模板中的图像数据通过访问 controllers.images 创建布局。

View 对此有用吗？感谢您的帮助。

Answer 1

其中一种方法是创建 2 个模板。一个用于 GridView ，另一个用于边框 View 。

您可以嵌套路由并覆盖 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" });
});