如何创建 Ember Handlebars 模板?
Ember.js 是一个基于 JavaScript 的框架，广泛用于构建复杂的 Web 应用程序。该框架允许开发者仅使用框架中一些常见的惯用手法、最佳实践以及其他单页应用生态系统模式的模式，即可创建可扩展的单页 Web 应用程序。
Handlebars 模板系统是其关键功能之一，它提供了一种简单而强大的动态网页创建方法。在本文中，我们将了解如何创建 Ember Handlebars 模板。
Ember 中的模板是什么?
Ember 中的模板用于定义 Web 应用程序的用户界面 (UI)。模板使用 Handlebars 语法编写，这是一种简单的模板语言，用于通过在 HTML 标记中嵌入数据来创建动态 HTML 页面。
Ember js 模板结合使用 HTML 和 Handlebars 语法来创建用于响应数据变化的用户界面。这包括条件、循环和计算属性等逻辑，使开发者能够用更少的代码创建复杂且动态的 UI。
它们的结构是组件的层次结构，其中每个组件代表 UI 的特定部分。组件可能包含其他组件，用于实现复杂和嵌套的结构。渲染后的组件会根据其模板以及传递给它的任何数据或参数生成 HTML。
Ember 中的 Handlebar 模板是什么?
Handlebars 是一种用于创建动态 HTML 页面的流行模板语言。它提供了一种将数据嵌入 HTML 标记的简单语法，使开发者能够以最少的代码创建动态且响应迅速的用户界面。
在 Handlebars 中，模板是使用 HTML 标记和 Handlebars 表达式的组合来定义的。Handlebars 表达式括在双花括号 ({{ }}) 中，可用于显示数据、遍历列表以及有条件地显示内容。
<ul>
{{#each items as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
在此模板中，{{#each}} 表达式用于遍历项目列表，{{item}} 表达式用于显示列表项 (<li>) 中的每个项目。
Handlebar 模板中的表达式
表达式用于将动态内容嵌入 HTML。它们括在花括号 {{}} 中，可以包含变量、辅助函数和条件语句。
假设我们有一个名为 last-name 的变量，其中包含一个字符串值"World"，并且我们希望在 Handlebars 模板中显示它，那么我们可以使用以下表达式 -
<h1>您好，{{last-name}}!</h1>
创建 Ember Handlebars 模板的步骤
要创建 Ember Handlebars 模板，需要遵循一些步骤。让我们逐一详细了解这些步骤。
步骤 1:创建 Ember 项目
创建 Ember Handlebars 模板的第一步是设置 Ember.js 项目。只需按照以下步骤即可完成 -
安装 Ember
npm install -g ember-cli
创建新应用
ember new ember-quickstart --lang en
运行服务器
cd ember-quickstart ember serve
步骤 2:创建新的 Handlebar 模板
创建完 ember 项目后，现在是时候创建一个新的Handlebar 模板。
请注意，Handlebars 模板的文件扩展名为 .hbs，通常存储在 Ember.js 项目的 app/templates 目录中。
现在转到 app/templates 并创建一个新的 Handlebars 模板文件，只需创建一个扩展名为 .hbs 的新文件即可。假设我们创建一个名为 my-template.hbs 的文件。
步骤 3:定义模板
下一步是定义 Handlebars 模板并向其中添加一些内容。如前所述，Handlebars 模板使用简单的语法来定义动态内容。以下是一个基本 Handlebars 模板的示例 -
<div class="my-new-template">
<h1>{{firstname}}</h1>
<p>{{lastname}}</p>
</div>
在上面的代码中，Handlebars 模板使用一个类名为"my-new-template"的 div 元素进行定义。在这里，我们借助 Handlebars 语法在 div 中定义了两个动态元素。第一个是 h1 元素，其文本为 {{firstname}};第二个是 p 元素，其文本为 {{lastname}}。
如果您不使用构建工具，那么您可以直接在 HTML 中使用 script 标签定义应用程序的模板，如下所示 -
<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 Handlebars 模板的步骤。首先，我们设置了一个 Ember 项目，然后生成了一个新的 Handlebars 模板，定义该模板，使用定义的模板，最后在我们的应用程序中渲染该模板。利用 Ember Handlebars 模板，我们可以轻松地为他们的 Web 应用程序构建复杂而动态的 UI。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
