Time to DRY up your code.

Say what? DRY is a programming principle that stands for “don’t repeat yourself.” In other words, if you write something down, write it down in just one place.

Both the listings for sightings and cryptids use an element with class="media well" with images and titles. So this is some code that can be DRYed up. The component does not match exactly to the cryptid listing item, but that is where the {{yield}} comes in.

Add the new {{#listing-item}} component to the cryptids listing. In app/templates/cryptids.hbs, replace the <div class="media well"> element and its child elements:

<div class="row">
  {{#each model as |cryptid|}}
    <div class="col-xs-12 col-sm-3 text-center">
      <div class="media well">
        {{#link-to 'cryptid' cryptid.id}}
          <img class="media-object thumbnail"
            src="{{if cryptid.profileImg cryptid.profileImg
            'assets/images/cryptids/blank_th.png'}}"
            alt="{{cryptid.name}}" width="100%" height="100%">
        {{/link-to}}
        <div class="caption">
          <h3>{{cryptid.name}}</h3>
        </div>
      </div>
      {{#link-to 'cryptid' cryptid.id}}
        {{listing-item imagePath=cryptid.profileImg name=cryptid.name}}
      {{/link-to}}
    </div>
  {{else}}
    <div class="jumbotron">
      <h1>No Creatures</h1>
    </div>
  {{/each}}
</div>

Did you notice that there is a difference between the way you referenced your component in the two templates? The sightings iterator uses the {{yield}} to add elements inside the <div class="caption"> and the cryptids template does not. When you want a component to only use the code in the component template file, you can use an inline component, written without the hash (#) – {{listing-item}} – as you did here. With this syntax, there is no closing HTMLBars element ({{/listing-item}}).

To add a link to the component, you wrapped the component with a {{#link-to}}. In the old iterated elements, only the image linked to the cryptid detail page. Now the entire element links to the cryptid detail. This example shows the flexibility of components to conform to the context of different route templates while rendering similar content. You could also add more attributes to the component to account for the need for a link inside the component template.