불씨를 받아들이기: 4부

이전 튜토리얼에서는 Ember.Object을 사용하여 모델을 정의하고 데이터 세트로 작업하는 방법을 소개했습니다. 이 섹션에서는 Ember가 Handlebars 템플릿 프레임워크를 사용하여 앱의 사용자 인터페이스를 정의하는 방법을 자세히 살펴보겠습니다.

클라이언트 템플릿

대부분의 서버 측 개발자는 템플릿을 사용하여 동적으로 채워지는 태그를 정의하는 데 익숙합니다. ASP.NET, ColdFusion, PHP 또는 Rails를 사용해 본 적이 있다면 제가 말하는 내용을 확실히 아실 것입니다.

JavaScript 클라이언트 측 템플릿은 특히 데스크톱과 유사한 경험을 구축하는 데 중점을 두고 있기 때문에 최근 인기를 얻기 시작했습니다. 즉, 클라이언트 측에서 더 많은 처리가 수행되고 데이터는 주로 서버 측 API 요청을 통해 가져옵니다.

얼마 전 jQuery 템플릿 플러그인이 처음 출시되었을 때 클라이언트 측 템플릿에 대해 글을 썼던 기억이 납니다. 거의 3년이 지난 지금도 이 게시물은 내 블로그에서 가장 많이 읽혀지는 게시물로, 클라이언트 측 템플릿에 대한 관심이 얼마나 높은지 보여줍니다. 그 이후로 풍부한 기능을 제공하고 커뮤니티를 지원하는 다른 많은 프레임워크가 출시되었습니다. 핸들바는 가장 인기 있는 옵션 중 하나이며 템플릿 요구 사항을 위해 Ember 프로젝트에서 선택한 프레임워크입니다. Handlerbars는 Ember.js 공동 창립자이자 핵심 팀 멤버인 Yehuda Katz가 만들었기 때문에 이는 의미가 있습니다. 하지만 저는 템플릿 프레임워크를 비교하지 않을 것이며 Ember.js가 기본적으로 사용하는 Handelbars에만 집중할 것입니다.

이전 기사에서는 코드의 매우 기본적인 템플릿 몇 가지를 소개했습니다.

두 가지 눈에 띄는 점은 스크립트 태그의 유형 선언과 핸들바가 작동할 표현식에 대한 구분 기호 역할을 하는 중괄호입니다. 이는 곧 자세히 설명할 매우 일반적인 구문이며 Ember 템플릿을 작성할 때 일관되게 사용하게 될 것입니다.

문법

Handlebars는 특수 구문을 사용하지만 실제로는 대부분 표준 HTML 마크업을 사용하게 됩니다. 핸들바는 이 태그에 콘텐츠를 삽입하여 사용자에게 데이터를 표시하는 데 사용됩니다. 구분된 표현식을 구문 분석하고 이를 핸들바에 사용하도록 요청한 데이터로 대체하여 이를 수행합니다. Ember의 경우 Handlebars는 후크를 제공하고 Ember는 이를 사용합니다. 이 데이터는 일반적으로 컨트롤러에서 가져옵니다(컨트롤러는 모델에 대한 인터페이스 역할을 한다는 점을 기억하세요).

모든 템플릿에 가장 먼저 필요한 것은 스크립트 태그 정의입니다. 여러분 대부분은 아마도 JavaScript 라이브러리를 로드하기 위해 스크립트 태그를 정의했을 것입니다. 실제로 Ember 프로젝트에 핸들바를 로드하는 작업은 이미 수행했습니다.

템플릿을 정의하는 데 사용하는 것과 약간 다릅니다. 먼저 "text/x-handlebars"의 type 属性。浏览器会忽略此 type를 지정하지만 텍스트를 검사할 수 있도록 남겨두고 Ember가 애플리케이션 내에서 템플릿을 인식할 수 있도록 합니다. 또한 Ember는 애플리케이션의 특정 부분을 템플릿과 연결하는 데 사용할 수 있는 "data-template-name"이라는 데이터 속성을 사용합니다. 예를 들어 다음 선언은 "employee"라는 템플릿을 정의합니다.

앱이 시작되면 Ember는 DOM에서 type="text/x-handlebars，编译它找到的模板，并将它们存储在 Ember 对象的一个​​属性中，该属性名为 Ember.TEMPLATES를 검색하고 이를 사용하여 주어진 경로에 대해 무엇을 렌더링할지 파악합니다. 그렇기 때문에 Ember의 명명 규칙을 따르는 것이 중요합니다. 위의 예에서 이 템플릿은 애플리케이션에서 생성한 직원 경로 및 컨트롤러에 자동으로 연결됩니다. 다시 한번 말하지만, 이러한 명명 규칙이 개발을 어떻게 더 쉽게 만드는지에 대해서는 아무리 강조해도 지나치지 않습니다.

Ember는 사용할 리소스와 렌더링할 템플릿을 결정하기 위해 URL을 사용합니다. URL이 "/profile"인 프로필 페이지가 있다고 가정해 보겠습니다. 해당 URL에 특정한 리소스(예: 경로 개체)를 로드하는 profile라는 리소스가 있고 동일한 이름의 템플릿도 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!