Ember switching between templates in {output} - html

Question

I'm building my first ember app which has CRUD properties. Part of my index.html code looks like this-
<script type = "text/x-handlebars" id = "settings">
<table>
{{#each setting in controller}}
<tr>
<td>
<h2>{{setting.name}}</h2>
</td>
</tr>
<tr>
<td>{{#link-to "setting" setting}}More Details..{{/link-to}}</td>
</tr>
{{/each}}
</table>
{{outlet}}
</script>
<script type = "text/x-handlebars" id = "setting">
{{#if deleteMode}}
<div class="confirm-box">
<h4>Really?</h4>
<button {{action "confirmDelete"}}> yes </button>
<button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}
<div class="col-xs-6">
<h4>{{name}}</h4>
<h4>{{address_line1}}</h4>
<h4>{{address_line2}}</h4>
<h4>{{address_city}}</h4>
<h4>{{address_state}}</h4>
<h4>{{address_zip}}</h4>
<h4>{{address_country}}</h4>
<button {{action "edit"}}>Edit</button>
</div>
<div class = "col-xs-6">
{{outlet}}
</div>
</script>
<script type = "text/x-handlebars" id = "setting/edit">
<div class="input-group">
<h5>Name:</h5>
{{input value=name}}
<h5>Address:</h5>
{{input value=address_line1}}
{{input value=address_line2}}
<h5>City:</h5>
{{input value=address_city}}
<h5>State:</h5>
{{input value=address_state}}
<h5>ZIP:</h5>
{{input value=address_zip}}
<h5>Country:</h5>
{{input value=address_country}}
<button {{action "save"}}> Save </button>
</div>
</script>
When I click on the edit button in the setting template, the setting/edit template with an edit form opens in the {outlet}of the setting template. I'm wondering how I would go about getting the setting/edit template to replace the setting template in the settings template's {outlet} so that they don't appear on the same page? New to ember dev and somewhat confused, any help appreciated.

Answer 1

Ember always routes to leaf route. when you are on settingRoute(means only setting template is rendered) in reality your leaf route is settingIndexRoute and in {outlet} of setting route setting/index template is rendered,which is generated by ember when it found out that you have not specified index template. so when you click on edit, setting/edit will replace setting/index template. so I would suggest that you move your setting template's content in setting/index.