Navigate from child to Parent not work - ember.js

Question

In my usecase, I want to navigate from parent route to a child route and from child to parent. The first case work, but the second not. Why? What is wrong? Is the mistake in renderTemplate?
App = Ember.Application.create();
App.Router.map(function() {
this.resource('parent',function(){
this.resource('child',function(){
});
});
});
App.ChildRoute = Ember.Route.extend({
renderTemplate: function(){
this.render('child', {
into: 'application',
controller: 'child'
});
}
});
<script type="text/x-handlebars">
<h1>Ember Sandbox</h1>
<nav>
{{#linkTo 'parent'}} Parent {{/linkTo}}
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Welcome</h2>
</script>
<script type="text/x-handlebars" data-template-name="parent">
<h2>Parent</h2>
{{#linkTo 'child'}} Child {{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="child">
<h2>Child</h2>
{{#linkTo 'parent'}} Parent {{/linkTo}}
</script>

Answer 1

Whenever you nest a resource, emberjs provides an Index route (App.ParentIndexRoute). When you transition from child resource to parent, the parent template is already rendered and hence it will be redirected to the index route (App.ParentIndexRoute).
Rendering your parent template in App.ParentIndexRoute will solve your problem
App.ParentIndexRoute = Ember.Route.extend({
renderTemplate: function(){
this.render('parent', {into: 'application'});
}
});
Your Working jsbin