如何创建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中的Handlebars模板？

Handlebars是一种流行的模板语言，用于创建动态HTML页面。它提供了一个简单的语法，用于将数据嵌入HTML标记中，允许开发者用最少的代码创建动态且响应迅速的用户界面。

在Handlebars中，模板使用HTML标记和Handlebars表达式的组合来定义。Handlebars表达式用双大括号（{{ }}）括起来，可用于显示数据、迭代列表和有条件地显示内容。

<ul>
   {{#each items as |item|}}
      <li>{{item}}</li>
   {{/each}}
</ul>

在这个模板中，{{#each}}表达式用于迭代项目列表，{{item}}表达式用于在列表项（<li>）中显示每个项目。

Handlebars模板中的表达式

表达式用于将动态内容嵌入HTML中。它们用大括号{{ }}括起来，可能包含变量、辅助函数和条件语句。

假设我们有一个名为last-name的变量，其中包含字符串值“World”，我们想在Handlebars模板中显示它，那么我们可以使用以下表达式：

<h1>Hello, {{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：创建一个新的Handlebars模板

创建Ember项目后，现在是时候创建一个新的Handlebars模板了。

请注意，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元素定义。在这里，在div中，我们使用Handlebars语法定义了两个动态元素。第一个是带有文本{{firstname}}的h1元素，第二个是带有文本{{lastname}}的p元素。

如果您不使用构建工具，则可以简单地在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类定义了一个model方法，该方法返回一个具有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。

更新于：2023年5月2日

浏览量：168

启动你的职业生涯

通过完成课程获得认证

开始学习
广告