Home/

...

/

Modifying Routes

Modifying Routes

In this lesson, you’ll learn about modifying routes and how to get the most out of routes in your Ember application.

Changes in application.hbs

Let’s start by removing the list of songs we have in the application template. We’ll move that list to its dedicated page we’ve just created. The highlighted lines of code are the ones that we need to move from application.hbs to its dedicated file, songs.hbs.

Press + to interact
{{!-- app/templates/application.hbs --}}
<div class="bg-blue-800 text-gray-100 p-8 h-screen">
  <div class="mx-auto mb-4">
    <div class="h-12 flex items-center mb-4 border-b-2">
      <a href="#">
        <h1 class="font-bold text-2xl">
          Rock & Roll <span class="font-normal">on Octane</span>
        </h1>
      </a>
    </div>
    <ul>
      {{#each
        (array
          (hash title="Black Dog" band="Led Zeppelin" rating=3)
          (hash title="Yellow Ledbetter" band="Pearl Jam" rating=4)
          (hash title="The Pretender" band="Foo Fighters" rating=2)
        ) as |song|
      }}
      <li class="leading-loose">
        {{song.title}} by {{song.band}} <span class="float-
        right">{{song.rating}}</span>
      </li>
      {{/each}}
    </ul>
{{outlet}} {{!--Added--}}
</div>
</div>

All that’s left in the application template is some markup for the application container, the site header, and the {{outlet}}. You’ll see more about outlets below. Therefore, the application template will serve as a layout for the two ...

Access this course and 1400+ top-rated courses and projects.