模板即 HTML

Ember 的用户界面核心是由 HTML 驱动的 —— 用户看到的 UI 的每一部分，都定义在应用程序中某个组件的模板里。正因如此，模板是 Ember 的核心，也是该框架最重要的组成部分之一。

我们将在接下来的章节中讨论模板的功能和核心概念，但在此之前，我们需要从基础开始。开始构建 Ember 组件最简单的方法就是使用 HTML！

Application Route 组件

Ember 应用程序的核心组件是位于 app/templates/application.gjs 中的 application route 组件。.gjs 扩展名是“Glimmer JavaScript”的缩写，它允许我们将 JavaScript 和模板放在同一个文件中。我们可以将 HTML 复制到该文件的 <template> 部分，它无需任何修改即可运行。例如，您可以复制以下简单的消息应用程序的 HTML 示例

app/templates/application.gjs

<template>
  <div class="messages">
    <aside>
      <div class="avatar is-active" title="Tomster's avatar">T</div>
    </aside>
    <section>
      <h4 class="username">
        Tomster
        <span class="local-time">their local time is 4:56pm</span>
      </h4>

      <p>
        Hey Zoey, have you had a chance to look at the EmberConf brainstorming doc
        I sent you?
      </p>
    </section>

    <aside class="current-user">
      <div class="avatar" title="Zoey's avatar">Z</div>
    </aside>
    <section>
      <h4 class="username">Zoey</h4>

      <p>Hey!</p>

      <p>
        I love the ideas! I'm really excited about where this year's EmberConf is
        going, I'm sure it's going to be the best one yet. Some quick notes:
      </p>

      <ul>
        <li>
          Definitely agree that we should double the coffee budget this year (it
          really is impressive how much we go through!)
        </li>
        <li>
          A blimp would definitely make the venue very easy to find, but I think
          it might be a bit out of our budget. Maybe we could rent some spotlights
          instead?
        </li>
        <li>
          We absolutely will need more hamster wheels, last year's line was
          <em>way</em> too long. Will get on that now before rental season hits
          its peak.
        </li>
      </ul>

      <p>Let me know when you've nailed down the dates!</p>
    </section>

    <form>
      <label for="message">Message</label>
      <input id="message" />
      <button type="submit">Send</button>
    </form>
  </div>
</template>

您可以通过在终端运行 npm start 来服务（serve）该应用程序，这会让本地的应用程序副本在您的 Web 浏览器中可见。

如果您启动服务并在 Web 浏览器中访问 localhost:4200，您将看到渲染出的 HTML。目前它还没有样式。

要为应用程序设置样式，请将以下 CSS 复制到 app/styles/app.css 中

styles/app.css

body {
  max-width: 800px;
  margin: auto;
  padding: 2em;
  font-family: sans-serif;
  background-color: #fdfdfd;
}

.messages {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 2em;
  border-radius: 0.5em;
  box-shadow: 0 0.25em 1.5em 0.25em rgba(0, 0, 0, 0.1);
}

.messages > section {
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

.messages p,
.messages ul,
.username {
  margin: 0.5em 0;
}

.local-time {
  font-size: 0.8em;
  color: #da6c4d;
  font-weight: normal;
  margin-left: 10px;
}

.avatar {
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;

  text-align: center;
  line-height: 60px;

  color: white;
  font-weight: bold;
  background-color: #ff907b;
}

.avatar.is-active:after {
  content: " ";
  height: 14px;
  width: 14px;
  border: solid 3px white;
  border-radius: 50%;
  background-color: #8bc34a;
  position: absolute;
  bottom: 0;
  right: 0;
}

.current-user .avatar {
  background-color: #30aba5;
}

form {
  display: grid;
  grid-template-columns: 1fr 6em;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-column: span 2;
}

form > label {
  grid-area: 1 / 1 / 2 / 2;
}

form > input {
  padding: 0.5em;
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  border: 1px solid #cccccc;
  border-right: none;
  font-size: 1em;
  grid-area: 2 / 1 / 3 / 2;
}

form > button {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border: 1px solid #cccccc;
  font-size: 1em;
  grid-area: 2 / 2 / 3 / 3;
}