EmberJS - how to restructure embedded models?

Note: Using Ember Rails 0.18.2 and ember-source 1.12.1

I have inherited an Ember app that has a strange function. I am new to Ember so maybe this is normal, but I find it odd.

There are 3 models:

1. Parents
2. Games
3. Comments

When a Parent views a game the url looks like this:

/<parent slug>/games/<game_id>

(the slug is just a unique id for the parent).

At this url there is a template that has this code:

  
  Chat with parents in your pod
  

  

Clicking the above button then changes the url to this:

/<parent slug>/games/<game_id>/comments

Then all the comments appear for that game.

I need to remove that button from the view and have Comments display automatically for each Game.

The API is Rails, and I can already change the API endpoint to return all the Comments at the same time a Game is requested (as an embedded array of objects).

But what do I replace with? Because my understanding is that is delegating to the Comments template due to this route:

App.CommentsRoute = Ember.Route.extend
  model: ->
    return this.store.find('comment', {
      game:   @modelFor('game').get('id')
      parent: @modelFor('parent').get('slug')
    }).then( (models) -> models.toArray() )

I believe I need to remove that route and make the Comments an embedded object inside the Game model. Do I then just replace outlet with something like:

<div class="commentItem">
  <div class="commentItem-author"></div>
  <div class="commentItem-body"></div>
</div>