2
votes

I have an ember application with nested routes but I'm having a problem getting a child view destroyed when transitioning back to the parent route. Probably easiest to look at this fiddle http://jsfiddle.net/j32yT/2/ - it starts by displaying a list of "users"; clicking Create leads to a user creation "form" with a Save button. On save, the action is fired back at the route which transitions back to its parent.

I was hoping that the create view would be destroyed when transitioning away, but it doesn't seem to. Adding in a function to handle the route exit does let me clean up, but it seems a bit messy. Have I misunderstood how the routing works?

UPDATE

By introducing an index route within my users route, I was able to achieve what I wanted - there's a new fiddle here http://jsfiddle.net/AsJca/1/ - am I on the right path here? New to this stuff, so don't yet understand what may constitute best practice!

1

1 Answers

0
votes

You have an outlet for Application View and one for UsersView,

<script id="application-template" type="text/x-handlebars">
    {{outlet}}
</script>

<script id="users-template" type="text/x-handlebars">
    {{#each user in controller}}
    {{user.name}}
    {{/each}}    
    <button {{action create_user}}>Create</button>
    {{outlet}}
</script>

When you do :

router.get('applicationController').connectOutlet('users');

the outlet of applicationView gets filled with UsersView, but see that the Users View has its own outlet.and when you do router.get('usersController').connectOutlet('createUser'); this outlet is filled with the create new form. So it resides along with the create new button that resides along with the outlet in users-template.

You can change it to,

router.get('applicationController').connectOutlet('createUser');

if you want to replace it, but again think of what you actually need, you know that.