在我之前的教學課程中，我介紹如何使用 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" 的模板。
再次查看命名約定，您會發現路由、控制器和模板都使用相同的 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，因此您可以在此处访问其完整的表达式。为了使几乎任何东西变得有用，条件表达式是必须的；车把提供了相当多的选择。
假设我有一个如下所示的 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'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中文網其他相關文章！
