ember.js - How to dynamic update 2 templates simultaneously in emberjs -

in folowing jsfiddle have add little example ember application. in 'details' view want display information selected group , if click on device in group, want replace details device details. how can manage in ember way?

http://jsfiddle.net/theremin/qgce6/1/

templates

<script type="text/x-handlebars" data-template-name="application">     <h2>sampleapp</h2>     {{outlet}} </script>  <script type="text/x-handlebars" data-template-name="groups">      <div>         <h3>groups</h3>              <div style="">             <ul>             {{#each controller}}                 <li>{{#linkto "devices" devices}}{{name}}{{/linkto}}</li>             {{/each}}             </ul>         </div>     </div>     <div>         {{render 'devices'}}     </div>     <div>         {{render 'details'}}     </div> </script>      <script type="text/x-handlebars" data-template-name="devices">      <h3>devices</h3>     <div>         <ul>         {{#each model}}             <li>{{#linkto "details" app.device}}{{name}}{{/linkto}}</li>         {{/each}}         </ul>     </div> </script>  <script type="text/x-handlebars" data-template-name="details">     <h3>details for:</h3>      <div>         <i>{{model}}</i>     </div> </script> 

javascript

app = ember.application.create({});  app.store = ds.store.extend({     revision    : 12,     adapter     : 'ds.fixtureadapter' });  app.router.map( function() {     this.resource('groups', function() {         this.resource('devices', { path: "/:group_id" });         this.resource('details', { path: "/:device_id" });     }); });  /**  * routes  */ app.indexroute = ember.route.extend({     redirect: function() {         this.transitionto('groups');     } });  app.groupsroute = ember.route.extend({     model       :   function( ){         //console.log("--->", app.group.find());         return app.group.find();     } });  /*app.detailsroute = ember.route.extend({     model : function(){         return this.modelfor("details");     } });*/  /**  * models  */ app.group = ds.model.extend({     name: ds.attr('string'),     details: ds.attr('string'),     devices: ds.hasmany('app.device') });  app.device = ds.model.extend({     name: ds.attr('string'),     details: ds.attr('string'),     groups: ds.hasmany('app.group') });  /**  * fixtures  */  app.group.fixtures = [{     id:1,     name:"group one",     details:"details group one",     devices:[1,2]  },{     id:2,     name:"group two",     details:"details group two",     devices:[2] }];  app.device.fixtures = [{     id:1,     name:"device1",     details:"details device1",     groups: [1]  },{     id:2,     name:"device2",     details:"details device2",     groups:[2] }]; 

is this wanted acheive ?

changes made

i've changed nesting

app.router.map( function() {     this.resource('groups', function() {         this.resource('devices', { path: "/:group_id" }, function(){             this.resource('details', { path: "/:device_id" });         });     }); }); 

so routes /groups/:group_id/:device_id

then i've removed {{render}} helpers & added {{outlet}} in templates

changes in devices template, passing device model controller, passing app.detail

{{#each device in model}}     <li>{{#linkto "details" device}}{{device.name}}{{/linkto}}</li> {{/each}} 

changes in details template

now have entire model can details using details property

<i>{{model.details}}</i> 

if think did not interpret question properly, let me know, i'll update answer accordingly

update per comments: fiddle

only 1 detail(final solution)

the fiddle

changes required

removing {{template}} displaying group details & using single {{outlet}} both details.

adding redirection in groupindexroute redirects display group details on clicking group

app.groupindexroute = ember.route.extend({   redirect: function(){     var model = this.controllerfor('group').get('model');     this.transitionto('detail',model);   } });