Mobile, Nested Templates, and Transitions

1

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.

2

So I think I found my answer here. 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?

3

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.