ember.js - In EmberJS, How to organize templates inside a parent layout, and how to define their Routes? -

i have app has 2 main models: account , transaction. want have list of accounts on left bar. when click on account, want list of transactions listed on center of page. , when click on transaction, want details of transaction appear on right bar. , last not least, when click edit transaction, want show small transaction form in same right bar, bellow transaction details.

my problem can't right routes , templates names work. do huge nested router map (could not work)? make use of ember "partial" edit transaction.

this.resource('accounts', function(){     this.resource('account',{ path: ':account_id' }, function(){         this.resource('transactions', function(){             this.resource('transaction', {path:':transaction_id'});         });     }); });     

if so, how name templates?

<script type="text/x-handlebars" data-template-name="application">     <div class="main">         {{outlet}}     </div> </script>  <script type="text/x-handlebars" data-template-name="accounts">     <div class="left-bar">         {{#each model}}             {{#linkto 'transactions' this}} {{name}} {{/linkto}}         {{/each}}     </div>     <div class="right-main">         {{outlet}}     </div> </script>  <script type="text/x-handlebars" data-template-name="accounts/transactions">     <div class="center">         {{#each model}}             {{#linkto 'transaction' this}} {{name}} {{/linkto}}         {{/each}}     </div>     <div class="right-bar">         {{outlet}}     </div> </script>  <script type="text/x-handlebars" data-template-name="accounts/transactions/transaction">     <div class="top-transaction-detail">         transaction description: {{description}}<br>         transaction value: {{value}}     </div>     <div class="bottom-transaction-edit">         {{partial 'transaction/edit'}}     </div> </script>  <script type="text/x-handlebars" id="transaction/_edit">     <p>{{view ember.textfield valuebinding='description'}}</p>     <p>{{view ember.textfield valuebinding='value'}}</p> </script> 

also, routes?

app.accountsroute = ember.route.extend({}); app.accountsaccounttransactionsroute = ember.route.extend({}); app.accountsaccounttransactionstransactionroute = ember.route.extend({}); ?????? 

thanks

my problem can't right routes , templates names work. do huge nested router map (could not work)?

yes, you've got right idea. level of nesting not make sense in case fit since want level of nesting in application ui. change make accounts , transactions default setting path '/'.

this.resource('accounts', {path: '/'}, function(){   this.resource('account',{ path: ':account_id' }, function(){     this.resource('transactions', {path: '/'}, function(){         this.resource('transaction', {path:':transaction_id'});     });   }); });  

if so, how name templates?

application.hbs accounts.hbs accounts/index.hbs -> "choose account" message account.hbs -> account details transactions.hbs -> list of transactions account transactions/index.hbs -> "choose transaction" message transaction.hbs -> transaction details transaction/index.hbs -> edit button transaction/edit.hbs -> edit form 

at least think that's right, it's pretty easy mess naming conventions. when in doubt, try adding following application config:

var app = ember.application.create({   log_view_lookups: true,   log_active_generation: true }); 

that way can see ember using , fix named incorrectly.

i make use of ember "partial" edit transaction.

i'd recommend using route instead.