Getting `this` to work in link-to helper of component

Question

I have a component defined like so:

<div class="col-sm-4 col-md-2">
  <div class="thumbnail">
    <img src="assets/images/{{image}}">
    <div class="caption">
      <h5>{{#link-to 'games.game' this}}{{title}}{{/link-to}}</h5>
    </div>
  </div>
</div>

And I am using it like so:

{{#each model as |game|}}
  {{game-details-small title=game.title image=game.image id=game.id}}
{{/each}}

I kind of accidentally got the link-to helper to work by passing in id=game.id as a property. However, if I remove that the link loses the reference to the id. I'm trying to find documentation on how passing in the id makes this reference the id correctly, but I can't find it. Any suggestions, links, or explanation would be helpful.

Answer 1

There is no this inside components, you have to pass the context, in your case you would pass the game:

{{#each model as |game|}}
  {{game-details-small model=game}}
{{/each}}

And the template becomes:

<div class="col-sm-4 col-md-2">
  <div class="thumbnail">
    <img src="assets/images/{{model.image}}">
    <div class="caption">
      <h5>{{link-to model.title 'games.game' model.id}}</h5>
    </div>
  </div>
</div>