How do I change or replace the parent template when rendering a child resource in Ember?

I have two resources, both of which have a template, model, and controller. The parent resource also has a route. The resources are related to each other in an Ember Data hasMany relationship. I've built these in a very straight-forward manner using Ember-Cli

Since you reach the second resource through the first (it has a parent-child relationship), I would like the URL of the parent to look like:

/parent/:parent_id

And I'd like the URL of the child to look like:

/parent/:parent_id/child/:child_id

When I try to nest the routes (changing the route and changing the link-to helper), and when I display the child route, it renders the child's template right below the parent's template instead of replacing it. I'd like to modify the parent or replace it instead.

Here's a codepen mockup of what's currently outputting for me:

• Child is not replacing parent

I'd like to figure out two things:

1) Is it possible to make the child resource maintain that URL, but replace the parent resource's view (and possibly still have access to both resources models)? How do I do this?

2) Is it possible to keep this relationship/view, but cause the parent template to reduce its view when it is viewed in the context of the child URL? Some details of the parent, but fewer. How do I do this?

Code

Output I have working now for parent/:parent_id/child/:child_id (not ideal output! same as codepen above):

<div class="row">
  <h1>Parent name</h1>
  <div class="columns">
    <div class="panel">
      <p>Parent details 1</p>
      <p>Parent details 2</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="columns">
    <h3>Child list here</h3>
    <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
      <li><div class="panel">Child 1</div></li>
      <li><div class="panel">Child 2</div></li>
      <li><div class="panel">Child 3</div></li>
      <li><div class="panel">Child 4</div></li>
      <li><div class="panel">Child 1</div></li>
      <li><div class="panel">Child 2</div></li>
      <li><div class="panel">Child 3</div></li>
      <li><div class="panel">Child 4</div></li>
    </ul>
  </div>
</div>

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>

Output of parent/:parent_id/child/:child_id if question 1 is answered (much better, and my original intention, to only show the child details):

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>

Output of parent/:parent_id/child/:child_id if question 2 is answered (I decided while struggling with these nested outputs that this is the ideal output, since it shows the child, but still has a little context and better navigation):

<div class="row">
  <div class="row">
    <span><strong>From parent:</strong> Parent name</span>
  </div>
  <div class="row">
    <div class="small-6 columns">
      <a href="/parent/543/child/227">Previous child</a>
    </div>
    <div class="small-6 columns">
      <a href="/parent/543/child/229" class="right">Next child</a>
    </div>
  </div>
</div>

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>