Memeluk Bara: Bahagian 4

Dalam tutorial saya sebelum ini, saya memperkenalkan cara menggunakan Ember.Object untuk mentakrif model dan berfungsi dengan set data. Dalam bahagian ini, kami akan melihat dengan lebih dekat cara Ember menggunakan rangka kerja templat Handlebars untuk menentukan antara muka pengguna apl anda. 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"

---

Templat pelanggan

• Kebanyakan pembangun bahagian pelayan biasa menggunakan templat untuk menentukan teg yang akan diisi secara dinamik. Jika anda pernah menggunakan ASP.NET, ColdFusion, PHP atau Rails, anda pasti tahu apa yang saya maksudkan. Templat sisi klien JavaScript benar-benar mula mendapat populariti baru-baru ini, terutamanya kerana ia memfokuskan pada membina lebih banyak pengalaman seperti desktop. Ini bermakna bahawa lebih banyak pemprosesan dilakukan pada bahagian klien, dan data terutamanya ditarik melalui permintaan API bahagian pelayan.
• Saya masih ingat menulis tentang templat sisi pelanggan suatu ketika dahulu apabila pemalam templat jQuery mula-mula dikeluarkan. Hampir tiga tahun kemudian, ia masih menjadi catatan yang paling banyak dibaca di blog saya, menunjukkan betapa tingginya minat terhadap templat sisi pelanggan. Sejak itu, banyak rangka kerja lain telah dikeluarkan, menyediakan ciri yang kaya dan komuniti sokongan. Bar hendal ialah salah satu pilihan yang lebih popular dan merupakan rangka kerja yang dipilih oleh projek Ember untuk keperluan templatnya. Ini masuk akal kerana Handlerbars dicipta oleh pengasas bersama Ember.js dan ahli pasukan teras Yehuda Katz. Tetapi sila ambil perhatian bahawa saya tidak akan membuat perbandingan antara rangka kerja templat, saya akan menumpukan perhatian sepenuhnya pada Handelbars kerana itulah yang Ember.js gunakan secara lalai. Dalam artikel sebelumnya saya menunjukkan beberapa templat yang sangat asas dalam kod:

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

Salin selepas log masuk

Salin selepas log masuk

Salin selepas log masuk
• Dua perkara yang menonjol ialah pengisytiharan jenis teg skrip dan pendakap kerinting, yang bertindak sebagai pembatas untuk ungkapan yang akan bertindak pada Handlebars. Ini adalah sintaks yang sangat tipikal, yang akan saya bincangkan secara terperinci tidak lama lagi, dan yang akan anda gunakan secara konsisten semasa membina templat Ember.

  ---

  Tatabahasa

  Walaupun Handlebars menggunakan sintaks khas, pada penghujung hari anda sebenarnya kebanyakannya menggunakan markup HTML standard. Bar hendal digunakan untuk menyuntik kandungan ke dalam tag ini untuk menyampaikan data kepada pengguna. Ia melakukan ini dengan menghuraikan ungkapan yang dibataskan dan menggantikannya dengan data yang anda minta Handlebars gunakan. Untuk Ember, Handlebars menyediakan cangkuk dan Ember menggunakannya. Data ini biasanya datang daripada pengawal anda (ingat, pengawal bertindak sebagai antara muka kepada model).

"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"
}

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

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

"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"
}

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

<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>

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

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

<img {{bindAttr src="logoUrl"}} alt="Memeluk Bara: Bahagian 4">

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

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

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

<div>
  Warning!
</div>

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