ember.js - Ember JS super basic routing, using just static templates -

i have been trying wrap head around how ember routing works on basic level , need little kick in right direction. providing code have written far, can follow along , see going on

i see page hierarchy so:

index --red ----light ----medium ----dark --green ----light ----medium ----dark --blue ----light ----medium ----dark 

the "medium" colors going index each nested route, think need router.js set so:

colors.router.map(function(){     this.resource('red', { path: '/red' }, function(){       this.route('light-red');       this.route('dark-red');     });     this.resource('green', { path: '/green'}, function(){       this.route('light-green');       this.route('dark-green');      });     this.resource('blue', { path: '/blue'}, function(){       this.route('light-blue');       this.route('dark-blue');     });    }); 

for now, want serve static html templates (with little bit of #link-to handlebars navigation)... can see working prototype.

the main template here

<div id="embercolors">     <header id="mainheader">       <h1>ember colors</h1>       <p>pick color</p>       <nav class="navi main">         <ul>           <li>{{#link-to "red" activeclass="active"}}red{{/link-to}}</li>           <li>{{#link-to "blue" activeclass="active"}}blue{{/link-to}}</li>           <li>{{#link-to "green" activeclass="active"}}green{{/link-to}}</li>         </ul>       </nav>     </header>  {{outlet}}  <footer id="footer">   <p>ok buh-bye</p> </footer> 

i have template each of 3 colors, each set this:

<section id="blue">   <header>     <h1>the blue</h1>     <p>blue cool.</p>     <nav class="navi sub">       <ul>         <li>{{#link-to "blue.light-blue"}}light{{/link-to}}</li>         <li>{{#link-to "blue"}}base{{/link-to}}</li>         <li>{{#link-to "blue.dark-blue}}dark{{/link-to}}</li>       </ul>     </nav>   </header>    {{outlet}}  </section> 

and broke each "shade" multiple templates

<div class="color-lt">   <p>light blue</p> </div> 

note: understand can reuse templates , load different model data them, rather hard coding lots of little templates... trying focus on learning routing @ moment.

because these basic templates, assume (based on have read) ember auto-generates lot of mvc , don't need define specific controllers, models, or routes (except perhaps indexroutes 3 main color landing pages).

i understand naming convention templates ember of work.

however naming conventions confusing me.

in router.js seems simple enough define routes how want appear in url

in handlebars {{#link-to}} though, looks need reference url (or template?) name . separation (include dashes or no)?

and when defining index route structured pascalcase?

i need figuring out how name/declare these routes ember can render them correctly.

for instance: because of nested nature of these pages... need store templates in nested directory file structure well? or being done artificially ember routing?

is there general mvc routing methodology supposed understand before can understand ember routing specifically?

sorry, have lot of questions this... seems supposed simple, don't know why not getting it. appreciated.

edit: let know that, have written out currently, ember inspector not throwing errors can see. convinced, far on right track, not providing router resolve...