ember.js and nested templates/views -

i'm still trying learn ember.js please bear me.

objective

i'm creating 1 page web application. when application, application ajax call return list of numbers lets. application process these numbers , create div each of numbers , store div container.

a click event associated each div, when user clicks on link pop dialoge come up.

code

index.html

 <script type="text/x-handlebars">             <h2>welcome ember.js</h2>             {{outlet}}          </script>          <script type="text/x-handlebars" data-template-name="payloads">              <div class="page">                 <div id="desktopwrap">                     <div id="theaterdialog" title="theater view" class="bibwindow1">                             {{view.name}}                     {{#each item in model}}                         <div {{bindattr id="item"}} {{action click item}}>                             <div class="thumb1" ></div>                             <div class="userdetails1">payload {{item}}</div>                             <div class="online1" ></div>                         </div>                         <div class="spacer10"></div>                     {{/each}}                      </div>                 </div>              </div>         </script> 

my app.js file here:

app = ember.application.create();  app.router.map(function() {  });  app.indexroute = ember.route.extend({   model: function() {     return ['payload_1', 'payload_2', 'payload_3'];   } });  app.payloadsroute = ember.route.extend({    model: function() {     return ['payload_1', 'payload_2', 'payload_3'];   }  })     app.indexcontroller = ember.objectcontroller.extend(     {         click: function(e)         {             alert("clicked:" + e);          }     }) 

general idea

the current code above create "theaterdialogue" div box 3 divs. onclick action associated through controller each of these divs. when user clicks on first div "payload 1" printed in alert box, second div "payload 2" etc. instead of print out, want able render new dialogue box (jquery dialogue box) contents rendered template. not clear me how done.....i understand views used store data templates...but not how nest template within 1 generated action?

if point me anyone, awesome!

any advice appreciated, d

basic approach nesting is,

• define nested routes (main step, if right, there)
• add {{outlet}} in templates if think view have appended later on

for example have 3 views a, b, c , nesting follows

 |_b   |_c 

then templates & b should have {{outlet}}, while c last 1 shouldnt have {{outlet}}

a example