Ember.js 是一个基于 JavaScript 的框架，广泛用于构建复杂的 Web 应用程序。该框架允许开发人员创建可扩展的单页 Web 应用程序，只需使用框架中其他单页应用程序生态系统模式的一些常见习惯用法、最佳实践和模式。
Handlebars 模板系统是其主要功能之一，它提供了一种简单而强大的方法来创建动态网页。在本文中，我们将了解如何创建 ember 车把模板。
Ember 中的模板是什么？
ember 中的模板用于定义 Web 应用程序的用户界面 (UI)。模板是使用 Handbars 语法编写的，这是一种简单的模板语言，用于通过在 HTML 标记中嵌入数据来创建动态 HTML 页面。
Ember js 模板使用 HTML 和句柄语法的组合来创建用于响应数据更改的用户界面。这包括条件、循环和计算属性等逻辑，使开发人员能够使用更少的代码创建复杂且动态的 UI。
它们的结构为组件层次结构，其中每个组件代表 UI 的特定部分。该组件可以包括用于允许复杂和嵌套结构的其他组件。呈现的组件根据其模板以及传递给它的任何数据或参数生成 HTML。
Ember 中的车把模板是什么？
Handlebars 是一种流行的模板语言，用于创建动态 HTML 页面。它提供了一种将数据嵌入 HTML 标记的简单语法，允许开发人员使用最少的代码创建动态和响应式的用户界面。
在 Handlebars 中，模板是使用 HTML 标记和 Handlebars 表达式的组合来定义的。 Handlebars 表达式包含在双花括号 ({{ }}) 中，可用于显示数据、迭代列表以及有条件地显示内容。
<ul>
{{#each items as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
在此模板中，{{#each}} 表达式用于迭代项目列表，{{item}} 表达式用于显示列表项 (<li>) 中的每个项目。
车把模板中的表达式
表达式用于将动态内容嵌入到 HTML 中。它们包含在大括号 {{}} 内，并且可能包含变量、辅助函数和条件语句。
假设我们有一个名为“last-name”的变量，其中包含一个字符串值“World”，我们希望将其显示在 Handlebars 模板中，那么我们可以使用以下表达式 -
<h1>Hello, {{last-name}}!</h1>
创建 Ember 车把模板的步骤
要创建 ember 车把模板，需要遵循一些步骤。让我们一一详细了解步骤。
第 1 步：创建 Ember 项目
创建 Ember Handlebars 模板的第一步是设置 Ember.js 项目。只需按照以下步骤即可完成此操作 -
安装 Ember
npm install -g ember-cli
创建新应用
ember new ember-quickstart --lang en
运行服务器
cd ember-quickstart ember serve
第 2 步：创建新的车把模板
您已经创建了 ember 项目，现在是时候创建一个新的车把模板了。
请注意，车把模板具有 .hbs 文件扩展名，通常存储在 Ember.js 项目的 app/templates 目录中。
现在转到应用程序/模板并创建一个新的 Handlebars 模板文件，只需创建一个带有 .hbs 文件扩展名的新文件即可。假设我们创建一个名为 my-template.hbs 的文件。
第 3 步：定义模板
下一步是定义车把模板并向其中添加一些内容。如前所述，车把模板使用简单的语法来定义动态内容。以下是基本 Handlebars 模板的示例 -
<div class="my-new-template">
<h1>{{firstname}}</h1>
<p>{{lastname}}</p>
</div>
在上面的代码中，Handlebars 模板是使用类为“my-new-template”的 div 元素定义的。在这里，在 div 中，我们借助 Handlebars 语法定义了两个动态元素。第一个是带有文本 {{firstname}} 的 h1 元素，第二个是带有文本 {{lastname}} 的 p 元素。
如果您不使用构建工具，那么您可以使用脚本标记在 HTML 中简单地定义应用程序的模板，请参见下文 -
<html>
<body>
<script type="text/x-handlebars">
<strong>{{firstname}}, {{lastname}}</strong>!
</script>
</body>
</html>
第 4 步：使用定义的模板
定义 Handlebars 模板后，您可以在 Ember.js 应用程序中使用它。为此，您需要创建一个路由和一个用于渲染模板的相应控制器。
以下是如何使用 my-new-template Handlebars 模板创建路线和控制器的示例 -
// app/routes/my-route.js
import Route from '@ember/routing/route';
export default class MyRoute extends Route {
model() {
return {
firstname: ‘Hello’,
lastname: ‘World’
};
}
}
// app/controllers/my-controller.js
import Controller from '@ember/controller';
export default class MyController extends Controller {
}
在此示例中，MyRoute 类定义了一个模型方法，该方法返回具有 title 和 body 属性的对象。 MyController 类是空的，但它会自动渲染 my-new-template Handlebars 模板，因为它的名称与路线的名称匹配。
第 5 步：渲染模板
最后一步是在您的应用程序中呈现模板。为此，您需要将模板出口添加到应用程序的主模板文件中。以下是如何执行此操作的示例 -
<!-- app/templates/application.hbs -->
<div class="container">
{{outlet}}
</div>
在此示例中，主应用程序模板文件定义了一个“container”类的 div 元素。 div 内部有一个模板出口，当 MyRoute 处于活动状态时，它将渲染 my-new-template Handlebars 模板。
输出
Hello, World!
结论
Handlebars 模板是 Ember.js 的重要组件，它使开发人员能够以最少的代码和精力开发动态且适应性强的 UI。它使用 HTML 和 Handlebars 表达式的组合来建立可以响应数据更改的模板。在本文中，我们学习了创建 ember 车把模板的步骤。首先，我们建立一个 Ember 项目，然后生成一个新的车把模板，定义模板，使用定义的模板，最后在我们的应用程序中渲染模板。借助 Ember Handlebars 模板，我们可以轻松为其 Web 应用程序构建复杂且动态的 UI。
