Home/

...

/

Creating Bands

Creating Bands

In this lesson, you’ll learn how to create bands using a slightly different approach.

Let’s take a slightly different approach and use a very simple form to create bands on a separate page. This means we’ll need to create a new route to display the form and a button to take the user there with the following command.

ember g route bands/new
Press + to interact
{{!-- app/templates/bands.hbs --}}
{{page-title "Bands"}}
<div class="w-1/3 px-2">
  <ul class="pl-2 pr-8">
    {{#each @model as |band|}}
      <li class="mb-2">
        <LinkTo @route="bands.band.songs" @model={{band.id}}>
          {{band.name}}
        </LinkTo>
      </li>
    {{/each}}
  </ul>
  <LinkTo
      @route="bands.new"
      class="inline-block ml-2 mt-2 p-2 rounded bg-purple-600 shadow-md
  hover:shadow-lg hover:text-white hover:bg-purple-500 focus:outline-
  none"
    >
    Add band
  </LinkTo>
</div>
<div class="w-2/3 px-2">
  {{outlet}}
</div>
Press + to interact
{{!-- app/templates/bands/new.hbs --}}
{{page-title "New band"}}
<h3 class="text-lg leading-6 font-medium text-gray-100">
  New band
</h3>
<div class="mt-6 grid grid-cols-1 row-gap-6 col-gap-4 sm:grid-cols-6">
  <div class="sm:col-span-4">
    <label for="name" class="block text-sm font-medium
leading-5">Name</label>
    <div class="mt-1 relative rounded-md shadow-sm">
<input
        id="name"
        class="w-full text-gray-800 bg-white border rounded-md py-2 px-4"
        value={{this.name}}
        {{on "input" this.updateName}}
      />
    </div>
  </div>
  <div class="sm:col-span-4">
    <button
      type="button"
      class="px-4 py-2 rounded bg-purple-600 shadow-md hover:shadow-lg
hover:text-white"
      {{on "click" this.saveBand}}
    >
      Save
    </button>
  </div>
</div>

New controller

As you recently learned, the template’s context is the controller, so to handle the action, we need to create it with the following command:

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