如何创建Ember.js Handlebars模板

Ember.js是一个基于JavaScript的框架，广泛用于构建复杂的Web应用程序。该框架允许开发人员通过使用一些常见的惯用语、最佳实践和其他单页面应用程序生态系统模式的模式，创建可扩展的单页面Web应用程序。

Handlebars模板系统是其关键功能之一，它提供了一种简单而强大的方法来创建动态Web页面。本文将介绍如何创建Ember.js Handlebars模板。

Ember中的模板是什么

在Ember中，模板用于定义Web应用程序的用户界面（UI）。模板使用Handlebars语法编写，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}} 表达式用于在列表项（

）中显示每个项目。

Handlebar模板中的表达式

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

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

<h1>Hello, {{last-name}}!</h1>

创建一个Ember Handlebar模板的步骤

创建一个Ember Handlebar模板需要遵循一些步骤。让我们逐一详细了解这些步骤。

步骤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：定义模板

下一步是定义handlebar模板并添加一些内容。如前所述，handlebar模板使用简单的语法来定义动态内容。下面是一个基本Handlebars模板的示例：

<div class="my-new-template">
   <h1>{{firstname}}</h1>
   <p>{{lastname}}</p>
</div>

在上面的代码中，使用一个class为“my-new-template”的div元素定义了Handlebars模板。在这个div中，我们通过Handlebars语法定义了两个动态元素。第一个是一个带有文本{{firstname}}的h1元素，第二个是一个带有文本{{lastname}}的p元素。

如果您不使用构建工具，您可以简单地使用script标签在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>

在这个示例中，主应用程序模板文件定义了一个class属性为”container”的div元素。在这个div里面，有一个模板出口(template outlet)，当MyRoute处于激活状态时，它会渲染my-new-template Handlebars模板。

输出

Hello, World!

结论

Handlebars模板是Ember.js的一个重要组件，它使开发人员能够以最少的代码和努力来开发动态和适应性的用户界面。它使用HTML和Handlebars表达式的组合来创建可以响应数据更改的模板。在本文中，我们学习了创建Ember handlebars模板的步骤。首先，我们设置了一个Ember项目，然后生成了一个新的handlebar模板，定义了模板，使用了定义的模板，最后在我们的应用程序中渲染了模板。通过Ember Handlebars模板，我们可以轻松构建复杂且动态的用户界面。