擁抱餘燼：第 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" 的模板。

• 路線：設定檔路線
• 控制器： 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中文網其他相關文章！