1

I currently have a route like:

/images

that renders a grid of images. When a user clicks on an image I transition to a nested route:

/images/:image_id

to display a large versions of that image.

I want to display the large image with the grid images bordering it and smaller than they are displayed in the grid view, but I'm not sure what a good approach in ember would be.

The grid view would be like:

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

And the view when one is clicked on would be something like:

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

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

I thought about creating an ImagesController action to handle when an image in the grid is selected. Then an if condition in the images handlebars template that changes the images layout and has an outlet for the large image. Something like:

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

I also thought of making the images a dependency of the single image as described here and then using the images data from the image handlebars template to create the layout by accessing controllers.images.

Would Views be of any use for this? Thanks for the help.

HypeXR
  • 711
  • 2
  • 6
  • 19

1 Answers1

2

One of way of doing this is by creating 2 templates. One for the grid view and the other for the bordered view.

You can nest the routes and override the renderTemplate method to replace the gridview when an item is clicked. Here is a demo for that.

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

Another way is to keep the routes flat and modify the path, to make the route appear as though they are nested. This way, the templates are not nested. Here is a demo for that.

App.Router.map(function() {
  this.route('photos', {path:'/photos'});
  this.route("photo", { path: "/photos/:photo_url" });
});
blessanm86
  • 31,439
  • 14
  • 68
  • 79
  • Regarding the first way, how would I obtain the data about all of the images in the "PhotoRoute" template? These are needed for the small images that border the large selected image. It's like the demo you linked to, but when the large movie image is displayed it also shows the small movies bordering it. – HypeXR May 19 '14 at 06:29
  • You can access model data from another route using the 'modelFor'. http://emberjs.com/api/classes/Ember.Route.html#method_modelFor. You can also use the 'needs' property to have access to another controller data. http://stackoverflow.com/questions/17227513/ember-js-how-to-get-controller-in-needs-which-is-nested-controllername – blessanm86 May 19 '14 at 06:40