拥抱余烬：第 4 部分

在我之前的教程中，我介绍了如何使用 Ember.Object 来定义模型并使用数据集。在本节中，我们将更仔细地了解 Ember 如何使用 Handlebars 模板框架来定义应用的用户界面。

---

客户端模板

大多数服务器端开发人员习惯于使用模板来定义将动态填充的标记。如果您曾经使用过 ASP.NET、ColdFusion、PHP 或 Rails，那么您肯定知道我在说什么。

JavaScript 客户端模板最近确实开始流行，特别是因为它专注于构建更多类似桌面的体验。这意味着更多的处理是在客户端完成的，数据主要通过服务器端 API 请求拉取。

我记得不久前 jQuery 模板插件首次发布时写过有关客户端模板的文章。近三年后，它仍然是我博客上阅读量最大的帖子，表明人们对客户端模板的兴趣有多么高涨。从那时起，许多其他框架已经发布，提供了丰富的功能和支持社区。 Handlebars 是更流行的选项之一，也是 Ember 项目选择的框架来满足其模板需求。这是有道理的，因为 Handlerbars 是由 Ember.js 联合创始人兼核心团队成员 Yehuda Katz 创建的。但请注意，我不打算在模板框架之间进行比较，我将严格关注 Handelbars，因为这是 Ember.js 默认使用的。

在之前的文章中，我在代码中展示了一些非常基本的模板：

<script type="text/x-handlebars">
    <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

有两件事很突出，那就是脚本标签的类型声明和大括号，它们充当 Handlebars 将作用的表达式的分隔符。这是非常典型的语法，我将很快详细讨论，您将在构建 Ember 模板时一致地使用它。

---

语法

尽管 Handlebars 使用特殊语法，但归根结底，您实际上主要使用标准 HTML 标记。 Handlebars 用于将内容注入到此标记中，以将数据呈现给用户。它通过解析分隔表达式并将其替换为您要求 Handlebars 使用的数据来实现此目的。对于 Ember，Handlebars 提供挂钩，Ember 使用它们。该数据通常来自您的控制器（请记住，控制器充当模型的接口）。

任何模板首先需要的是脚本标记定义。大多数人可能已经定义了脚本标签来加载 JavaScript 库。事实上，您已经这样做了，将 Handlebars 加载到您的 Ember 项目中：

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

与使用它来定义模板略有不同。首先，我们指定“text/x-handlebars”的 type 属性。浏览器会忽略此 type，但保留文本可供检查，并允许 Ember 识别应用程序内的模板。此外，Ember 使用名为“data-template-name”的数据属性，Ember 可以使用该属性将应用程序的特定部分与模板关联起来。例如，以下声明定义了一个名为“employee”的模板：

<script type="text/x-handlebars" data-template-name="employee">
...
</script>

当您的应用程序启动时，Ember 会扫描 DOM 中的 type="text/x-handlebars，编译它找到的模板，并将它们存储在 Ember 对象的一个​​属性中，该属性名为 Ember.TEMPLATES 并使用它找出为给定路线呈现的内容。这就是为什么遵循 Ember 的命名约定如此重要。在上面的示例中，此模板将自动关联到您在应用程序中创建的员工路线和控制器。同样，我可以'不必过多强调这些命名约定将如何使您的开发变得更加容易。

Ember 依赖 URL 来确定需要使用的资源和需要渲染的模板。假设您有一个 URL 为“/profile”的个人资料页面。您将拥有一个名为 profile 的资源，它将加载该 URL 的特定资源（如路由对象），并且您还将拥有一个同名的模板。我们在 Ember 系列的第 2 部分中回顾了定义资源和路由对象，因此如果您不确定我正在讨论的内容，请务必跳回那里重新了解一下。

当您访问该 URL 时，Ember 知道它需要加载这些资源并解析您定义的模板。它通过其命名约定来执行此操作，知道因为您转到“/profile”，所以它需要加载 profile 中定义的资源，并呈现名为 data-template-name="profile" 中定义的资源，并呈现名为 data-template-name="profile" 的模板。

• 路线：配置文件路线
• 控制器： ProfileController
• 模板：个人资料（注意是小写）

再次查看命名约定，您会发现路由、控制器和模板都使用相同的 URL 名称绑定在一起，但模板拼写为小写。这使得 Ember 能够在幕后管理一切，而无需进行大量接线。

还需要注意的是，如果您声明的模板没有 data-template-name 属性，Ember 将假定它是应用程序范围的模板 - 通常用作站点范围模板来创建用户界面元素，例如页眉、页脚和导航。如果您没有为应用程序甚至资源（例如 URL）显式定义模板，Ember 会自动为您执行此操作，以确保应用程序的稳定性和一致性。

---

表达式

下一步是包含您的标记和用于表示数据的分隔表达式。表达式通过双花括号进行分隔，这使得它们可以通过从控制器传递的数据轻松识别和解析。这是一个例子：

<script type="text/x-handlebars">
    <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

在这种情况下，{{firstName}} 和 {{lastName}} 表达式将被 Ember 解析并替换为实际数据。此外，Ember 设置了观察者，以便当您的数据发生变化时，您的模板会自动更新，并将更新反映给应用程序的用户。

到目前为止，我已经向您展示了一个非常简单的示例，但要点是：

• Ember 使用特殊的类型属性来定义模板。
• 模板使用标准标记以及分隔表达式，这些表达式在客户端进行解析。
• 这些模板具有 Handlebars 的完整功能集。
• Ember 设置观察者来动态更新您的用户界面数据（当用户界面数据发生变化时）。

这为您构建用户界面的方式提供了很大的灵活性。让我们继续看看可用的功能。

---

高级表达式

请记住，Ember 利用了 Handlebars，因此您可以在此处访问其完整的表达式。为了使几乎任何东西变得有用，条件表达式是必须的；车把提供了相当多的选择。

假设我有一个如下所示的 JSON 数据集：

"items": [{
    "title": "Tearable Cloth Simulation in JavaScript",
    "url": "http://codepen.io/stuffit/pen/KrAwx",
    "id": 5592679,
    "commentCount": 20,
    "points": 127,
    "postedAgo": "1 hour ago",
    "postedBy": "NathanKP"
}, {
    "title": "Netflix now bigger than HBO",
    "url": "http://qz.com/77067/netflix-now-bigger-than-hbo/",
    "id": 5592403,
    "commentCount": 68,
    "points": 96,
    "postedAgo": "2 hours ago",
    "postedBy": "edouard1234567"
}

如果我想确保 title 数据可用，我可以使用 #if 表达式添加条件“if”语句：

{{#if item.title}}
    <li>{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}</li>
{{/if}}

这会检查 item.title 是否未定义，并继续处理 title、postedAgo 和 postedBy 数据表达式的后续表达式。

由于该数据集包含多个“记录”，因此可以安全地假设我们可能希望循环 item 的每个元素。这就是 {{#each}} 表达式发挥作用的地方。它允许您枚举对象列表。因此，再次记住模板是标记和 Handlebars 表达式的组合，我们可以使用 #each 表达式来循环遍历 Ember 模型对象中可用的每个项目。请记住，Ember 模型是从控制器派生的，控制器通过 Ember 的命名约定与模板关联。

<ul>
    {{#each item in model}}
    {{#if item.title}}
        <li>{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}</li>
    {{/if}}
    {{/each}}
</ul>

这会渲染出类似于以下内容的内容：

<ul>
<li>Tearable Cloth Simulation in JavaScript - 1 hour ago by NathanKP</li>
<li>Netflix now bigger than HBO - 2 hours ago by edouard1234567</li>
<li>Fast Database Emerges from MIT Class, GPUs and Student&#39;s Invention - 33 minutes ago by signa11</li>
<li> Connecting an iPad retina LCD to a PC - 6 hours ago by noonespecial</li>
</ul>

显着的优势是 Ember 隐含的观察者规范，它将在更新时更新您的数据。

如果您的条件表达式需要更复杂，您将需要创建一个计算属性。这允许您基于可以将复杂代码条件应用于数据的方法创建属性。假设我只想显示标题为“JavaScript 中的可撕裂布料模拟”的数据。我需要设置几件事：

• 我需要一个计算属性来扫描每个项目并告诉我标题是否匹配
• 我需要创建一个控制器，可供模板中枚举的每个项目使用
• 我需要更新模板，以便它为每个项目使用此控制器

  我需要做的第一件事是创建新的控制器，它将包装循环的每个项目并在其中创建计算属性：

App.TitleController = Ember.ObjectController.extend({
    titleMatch: function() {
      return this.get('title') === "Tearable Cloth Simulation in JavaScript";
    }.property()
});

查看代码，我们对 Ember.ObjectController 进行子类化以创建控制器。这是控制器，它将包装模板中循环的每个项目。接下来，我们创建一个名为 titleMatch 的方法，它使用 get() 方法来拉回当前标题，将其与我定义的文本进行比较，然后返回一个布尔值。最后，调用 Ember property() 方法将 titleMatch 方法定义为计算属性。

完成此操作后，我们将更新模板的 {{#each}} 表达式，以使用我们创建的新控制器来表示每个项目。这是通过使用 itemController 指令来完成的。需要理解的关键一点是 itemController 是 Ember 中的一个关键短语，旨在将控制器与模板的项目关联起来。不要将其与实际的控制器名称混淆（就像我最初所做的那样）。控制器名称分配给 itemController，如下所示：

<ul>
   {{#each item in model itemController="title"}}
      {{#if titleMatch}}
        <li>{{foo.title}} - {{foo.postedAgo}} by {{foo.postedBy}}</li>
      {{/if}}
    {{/each}}
</ul>

同样，命名约定规定，在模板中分配名称时，我们使用小写。在本例中，我们将 TitleController 分配给 itemController。

现在，当循环每个项目时，计算属性 titleMatch 用于评估标题并在匹配时显示数据。

---

将数据绑定到元素

创建动态模板不仅仅是吐出文本。有时，UI 的外观需要受到正在处理的数据的影响。显示图像或建立链接就是很好的例子。

将数据绑定到元素需要使用特殊的 Ember 助手来帮助定义属性的上下文，并确保在数据更改时正确更新属性。对于元素属性，{{bindAttr}} 帮助器用于填充属性的值。如果我们需要动态指定图像的 URL，我们将使用以下语法：

<img {{bindAttr src="logoUrl"}} alt="拥抱余烬：第 4 部分">

对于不接收值的属性也可以这样做，例如disabled：

<input type="checkbox" {{bindAttr disabled="isAdministrator"}}>

在这种情况下， isAdminstrator 可以是基于控制器中的方法的计算属性，或者只是一个普通的对象属性，为您在定义禁用复选框的条件方面提供了很大的灵活性。这种灵活性也适用于定义类名。如果我想使用条件语句来定义是否应将类应用于我的元素，我可以使用以下代码：

<div {{bindAttr class="isUrgent"}}>
  Warning!
</div>

根据布尔状态，我的标记将是：

<div {{bindAttr class="is-urgent"}}>
  Warning!
</div>

对于 true 条件，或：

<div>
  Warning!
</div>

对于 false 条件。请注意，当我为该类指定 isUrgent 时，Ember 对该名称进行了 dasher 处理，并将该类呈现为 is-urgent。如果您希望根据结果指定自己的类，可以使用类似于三元语句的条件表达式：

<div {{bindAttr class="isUrgent:urgent:normal"}}>

这将根据 isUrgent 的条件值返回该类的 urgent 或 normal。

---

了解模板

模板将成为用户界面的基础，因此花时间阅读 Ember 和 Handlebars 站点上的文档以充分了解它们的整体功能非常重要。即使您不使用 Ember，Handlebars 也是一个适合您日常使用的出色框架，并且值得投资学习如何使用它。

Gabriel Manricks 在 Nettuts+ 上编写了一篇关于 Handlebars 的精彩教程，您可以使用它来加快框架的速度。

以上是拥抱余烬：第 4 部分的详细内容。更多信息请关注PHP中文网其他相关文章！