模板简介

模板是 HTML

在 Ember 中，模板本质上是带有动态内容渲染能力的 HTML。模板使用 Handlebars 语言编写。Ember 使用 Glimmer 作为模板引擎，因此兼容 Handlebars 语法。

Handlebars

Handlebars 是一种模板语言。在编译阶段，Handlebars 会将模板转换为 JavaScript 函数，从而提升执行效率。动态表达式使用双大括号表示：{{...}}。这些双大括号在 Handlebars 中也被称为“胡子”（mustaches）。在模板执行时，大括号中的表达式会被对象提供的值所替换。下面的例子包含两个 Handlebars 表达式：firstname 和 lastname。

1<h4> {{firstname}} {{lastname}} </h4>

应用中的模板

在 Ember 中，模板主要分为两种类型：路由模板和组件模板。路由模板在用户访问特定 URL 时被渲染。而 组件模板 则用于包含可复用的内容。所有路由模板都位于应用的 app/templates 目录下。应用程序启动时渲染的模板是 application.hbs。

注意： 我们将在后续章节中详细学习组件。

探索模板

让我们打开一个全新的 Ember 应用。以下是应用中 application.hbs 模板文件的内容：

1{{!-- app/templates/application.hbs--}}
2
3{{page-title "FirstApp"}}
4
5{{!-- 以下组件显示 Ember 的默认欢迎信息。 --}}
6<WelcomePage />
7{{!-- 可以自由删除此行！ --}}
8
9{{outlet}}

• 第 3 行：这是一个使用名为 page-title 的助手的 Handlebars 表达式。该助手将浏览器标签页的标题设置为 FirstApp。我们可以根据需要修改它。
• 第 6 行：<WelcomePage/> 组件是由 Ember CLI 在创建应用时生成的。该组件渲染出如下输出：

• 第 9 行：{{outlet}} 是我们第一个动态表达式。我们将在“Ember 中的路由”一章中详细讨论它。
• 这些 {{!-- 注释 --}} 表达式用于注释代码。

现在，我们移除 <WelcomePage /> 组件和 {{outlet}}，并替换为以下内容：

1{{!-- app/templates/application.hbs--}}
2
3{{page-title "FirstApp"}}
4
5{{!-- 已移除的代码
6<WelcomePage />
7{{outlet}}--}}
8
9<ul>
10  {{#each
11    (array
12      (hash fruit="Mango" color="Yellow")
13      (hash fruit="Strawberry" color="Red")
14      (hash fruit="Banana" color="Yellow")
15    ) as |item|
16  }}
17  <li>
18    {{item.fruit}} is {{item.color}} in Color.
19  </li>
20  {{/each}}
21</ul>

上述代码中，我们渲染了一个包含水果及其对应颜色的无序列表。

• 第 10 行：#each 助手用于在动态表达式 {{...}} 中遍历数组和列表。
• 第 11 行：我们使用 (array) 定义一个数组。
• 第 12–14 行：我们在数组中插入对象。hash 助手用于在模板中创建普通的 JavaScript 对象（POJO）。上述代码生成如下对象数组：

1[
2{'fruit': 'Mango', 'color': 'Yellow'},
3{'fruit': 'Strawberry', 'color': 'Red'},
4{'fruit': 'Banana', 'color': 'Yellow'}
5]

• 第 15 行：我们指定在遍历数组时，每个元素都以 item 作为变量名访问。在循环过程中，每个元素都会通过 as 关键字后指定的名称来引用。
• 第 17–19 行：我们在循环中渲染 <li> 标签。由于数组中有三个元素，因此会生成三个 <li> 标签。
• 第 18 行：我们使用动态的 Handlebars 表达式来获取每个元素的水果和颜色。
• 第 20 行：{{/each}} 是 #each 助手的结束标记。

上述代码的输出应如下图所示：

运行我们的应用

运行以下代码以查看输出效果。你也可以对下方代码进行尝试和修改。

注意： 下方代码可能需要一些时间才能运行。服务器启动后，请访问应用的 URL 查看如上图所示的输出。

下方代码框仅显示新创建或内容已更新的文件，不会展示项目中的全部文件。