javascript - Ember.js - Rendering a different layout on a nested route change -

i have route like:

/images

that renders grid of images. when user clicks on image transition nested route:

/images/:image_id

to display large versions of image.

i want display large image grid images bordering , smaller displayed in grid view, i'm not sure approach in ember be.

the grid view like:

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

and view when 1 clicked on like:

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

i thought creating imagescontroller action handle when image in grid selected. if condition in images handlebars template changes images layout , has outlet large image. like:

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

i thought of making images dependency of single image described here , using images data image handlebars template create layout accessing controllers.images.

would views of use this? help.

one of way of doing creating 2 templates. 1 grid view , other bordered view.

you can nest routes , override rendertemplate method replace gridview when item clicked. here demo that.

app.photoroute = em.route.extend({   rendertemplate: function() {     this.render('photo', {        into: 'application'     });   } }); 

another way keep routes flat , modify path, make route appear though nested. way, templates not nested. here demo that.

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