ember.js - Hiding parent view in Master/Detail pattern -

i building mobile-first app therefore needs quite economic screen real-estate , there cases when navigating between resource , 1 of it's sub-routes want able have subroute take place of {{outlet}} @ same time remove parent view/template's dom elements. if route set as:

router.map(function() {     this.resource('workouts', function() {         this.route('workout', { path: '/:id' }, function() {             this.resource('exercises', function() {                 this.route('new');                 this.route('exercise', { path: '/:id' });                });         });     }    } 

and let's wanted start browsing looking @ specific workout ("1234") list of exercises undertook in workout without details. navigate to:

http://best.app.ever/workouts/1234 

and when clicked on particular exercise i'd want see details of exercise ("123") at:

http://best.app.ever/workouts/1234/exercises/123 

this works without issue -- might expected -- details of exercise inserted dom @ {{outlet}} in workout.hbs template. i'm looking graceful , easy way replace parent templates dom entries (at least smaller media types).

extra credit solution allow sort of subtle animation between states user understand transition.

---

btw, have working solution i've convinced myself more of hack "right way" of doing in ember ... goes this:

• in child view (aka, exercises/exercise) have overloaded default view , add following:

  export default ember.view.extend({     hidemaster: function() {         var master = this.$().parents('body').find('#master-screen');         master.hide();     }.on('didinsertelement') }); 

this depends on "master" (in case workout.hbs template) having dom element "master-screen" encompases part of dom want hide. type of solution lend animating states suspect smart mind out there has more ember-like way of doing ... if please speak up. :)

i tempted use exercises/index template display list of exercises. way it’ll automatically swapped out when transition exercises/exercise. use liquid-fire add graceful transition.

however, solution won’t allow keep full list of exercises on-screen desktop browsers. case, i’d right approach design component dedicated appropriate responsive behaviour. it’d similar job view you’ve defined, far more explicit when come @ templates further down road.

dumb example:

exercises.hbs:

{{#x-responsive-view}}   {{#x-parent-content}}     <ul>       {{#each exercise in exercises}}         <li>...</li>       {{/each}}     </ul>   {{/x-parent-content}}   {{#x-child-content}}     {{outlet}}   {{/x-child-content}} {{/x-responsive-view}} 

x-responsive-view hide x-parent-content if we’re on mobile , x-child-content contains something.