# Mobile, Nested Templates, and Transitions

**URL:** <https://discuss.emberjs.com/t/mobile-nested-templates-and-transitions/6920>\
**Category:** Uncategorized\
**Created:** [December 15, 2014, 1:08pm UTC](https://discuss.emberjs.com/t/mobile-nested-templates-and-transitions/6920 "2014-12-15T13:08:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cphill11](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cphill11/32/9782_2.png) [@cphill11](https://discuss.emberjs.com/u/cphill11)\
**Post date:** [December 15, 2014, 1:08pm UTC](https://discuss.emberjs.com/t/mobile-nested-templates-and-transitions/6920/1 "2014-12-15T13:08:19Z")

</div>

Hi,

I am fairly new to ember, so far I am extremely happy with the developer experience. However, I am not finding much information related to building mobile applications. So far I have everything working as I want except the URL, but I would like to have some nested routes with templates, but I do not want to render the child template until a user takes action. An example would be, showing a customer account and having sub sections for orders, settings, etc., but not displaying anything from there until the user navigates to it, however, I want the URL to contain the correct state, which I do not currently have. Maybe I just do not know what terminology I should use to describe the issue.

---

<div class="post-metadata">

**Author:** ![cphill11](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cphill11/32/9782_2.png) [@cphill11](https://discuss.emberjs.com/u/cphill11)\
**Post date:** [December 15, 2014, 3:55pm UTC](https://discuss.emberjs.com/t/mobile-nested-templates-and-transitions/6920/2 "2014-12-15T15:55:05Z")

</div>

So I think I found my answer [here](http://discuss.emberjs.com/t/best-practice-for-nested-templates/5813). Basically I should be putting my outlet in the base template for the resource, then define a dedicated index template. Hmm, I will give this a try and update. Is this the most idiomatic way to do this? Is there a more preferred approach?

---

<div class="post-metadata">

**Author:** ![cphill11](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cphill11/32/9782_2.png) [@cphill11](https://discuss.emberjs.com/u/cphill11)\
**Post date:** [December 15, 2014, 6:17pm UTC](https://discuss.emberjs.com/t/mobile-nested-templates-and-transitions/6920/3 "2014-12-15T18:17:46Z")

</div>

So now I even more confused as to how outlet and templates worked.

Here are my routes:

```
this.resource('customers', function(){
this.route('show', {path:':customer_id'}, function(){
this.resource('pets', function(){
this.route('show', {path: ':pet_id'});
this.route('edit', {path: ':pet_id/edit'});
this.route('new'); });
});

```

So when I go to Customers/2/Pets, I just get the customer template. So I added an {{outlet}} to the customer show template and now I get the correct behavior, that I was expecting. I just do not understand why that works, I thought outlets rendered to a template and would append to it, but it seems to replace it. I am just confused any guidance would be appreciated.