ember.js - Controlling component data across multiple routes -

i have mapping app has full-screen map sidebar information. app has 2 routes:

• one route should display list of places markers on map, example /places/
• one route should display single place particular place's marker centered on map, example places/1/

my map component in application.hbs, "outside" of route templates , persists across route changes. looks like:

<div class="page">   <aside class="sidebar">       {{outlet}}   </aside>   <div class="content">     {{places-map ... }}   </div> </div> 

and routes looks like:

router.map(function() {   this.route('index', { path: '/' });   this.route('place', { path: "/place/:place_id" });   this.route('places'); }); 

so while have set , working (i can see list of places , move single particular place, in both cases map in "background"), can't understand how routes can feed information component or how routes can communicate component sitting "outside" of context?

is possible pattern ember , there way achieve it?

ditto on @gerdner said data-down-actions-up.

starting top:

application/controller.js

import ember 'ember';  export default ember.controller.extend({   somethingdownfromcontroller: null }); 

application/route.js

import ember 'ember';  const {   set } = ember;  export default ember.route.extend({   actions: {     sendsomethingup(something) {       set(this.controllerfor('application'), 'somethingdownfromcontroller', something);     }   } }); 

application/template.hbs

<div class="page">   <aside class="sidebar">     {{outlet}}   </aside>   <div class="content">     {{places-map       something=somethingdownfromcontroller     }}   </div> </div> 

place/route.js

import ember 'ember';  export default ember.route.extend({   model() {     return {       somethingfromnestedroute: 'boooooyaaaaah'     }   } }); 

place/template.hbs

<button {{action 'sendsomethingup' model.somethingfromnestedroute}}>   send model </button> 

you might not need send action you're bubbling here. if that's case can grab need application controller or route , pass down places-map.

places-map/template.hbs

insert outer context: <div>{{something}}</div> 

here's ember-twiddle. made few notes in router.js file might useful depending on exact needs of application.