Ember.js의 세계를 받아들이세요

사용 가능한 JavaScript 라이브러리가 많으며 대부분은 일반적인 웹 사이트에서 요구하는 전통적인 DOM 중심 상호 작용을 제공하는 데 매우 능숙합니다. 그러나 단일 페이지 애플리케이션을 위한 관리 가능한 코드 기반을 구축하는 경우 문제를 해결하려면 완전히 새로운 프레임워크 세트가 필요합니다.

오래된 속담처럼: "작업에 가장 적합한 도구를 사용하십시오."

jQuery와 같은 기존 라이브러리가 데스크톱과 같은 경험을 구축하는 데 도움이 되지 않는 것이 아니라 단지 사용 사례가 아니며 데이터 바인딩, 이벤트 라우팅, 상태 관리와 같은 기능이 부족할 뿐입니다. 물론, 이러한 기능 중 일부를 구현하기 위해 여러 플러그인을 함께 엮을 수도 있지만 제 생각에는 이러한 특정 문제를 해결하기 위해 처음부터 특별히 구축된 프레임워크로 시작하는 것이 더 합리적입니다. 옛말처럼: "작업에 가장 적합한 도구를 사용하세요."

저는 최근 Ember.js 팀과 인터뷰를 했습니다. 저의 동기는 제가 "새로운 인기"라고 부르는 Ember.js에 대해 알아보는 것이었습니다.

Ember.js는 전통적인 웹사이트를 구축하기 위한 프레임워크가 아닙니다.

p>Ember는 클라이언트 측 템플릿에도 의존합니다...

많이. 이는 동적 HTML 기반 템플릿을 생성할 수 있는 표현식을 제공하는 Handlebars 템플릿 라이브러리를 사용합니다. Ember 개발자는 이러한 삽입 가능한 표현식에 데이터를 바인딩하고 애플리케이션의 표시를 동적으로 변경할 수 있습니다. 예를 들어, 일련의 사람들을 가져와 정렬되지 않은 목록으로 표시하는 템플릿을 만들 수 있습니다. 으아악

• 人类 1.0 RC1
• 处理栏 1.0 RC3
• jQuery 1.9.1

还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 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>

请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。

当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。

余烬之地的布局

在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。

模板

模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：

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

请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。

Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。

路由

应用程序的路由器有助于管理应用程序的状态。

应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。

您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。

App.Router.map( function() {
   this.route( 'about' ); // Takes us to "/about"
});

路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：

App.EmployeesRoute = Ember.Route.extend({
   model: function() {
       return App.Employee.find();
   }
});

在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。

模型

数据的对象表示。

模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。

控制器

控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。

要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。

您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。

观看次数

Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。

命名约定

Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：

App.Router.map( function() {
   this.resource( 'employees' );
});

然后我会命名我的组件，如下所示：

• 경로 개체: App.EmployeesRoute
• 컨트롤러: App.EmployeesController
• 모델: App.Employee
• 보기: App.EmployeesView
• 템플릿: 직원

이 명명 규칙을 사용하는 것은 두 가지 목적으로 사용됩니다. 첫째, 유사한 구성요소 간의 의미론적 관계를 제공합니다. 둘째, Ember는 존재하지 않을 수도 있는 필수 객체(예: 경로 객체 또는 컨트롤러)를 자동으로 생성하고 애플리케이션에서 사용할 수 있도록 연결할 수 있습니다. 이것이 앞서 말한 '마법'이다. 실제로 이것은 Application 객체를 인스턴스화할 때 전역 애플리케이션 수준에서 Ember가 수행하는 작업과 정확히 같습니다.

var 앱 = Ember.Application.create();

이 한 줄은 애플리케이션의 라우터, 컨트롤러, 보기 및 템플릿에 대한 기본 참조를 생성합니다.

• 경로 개체: App.ApplicationRoute
• 컨트롤러: App.ApplicationController
• 보기: App.ApplicationView
• 템플릿:App

위에서 생성한 "employees" 경로로 돌아가서 사용자가 애플리케이션에서 "/employees"로 이동하면 Ember는 다음 개체를 찾습니다.

• App.EmployeesRoute
• App.EmployeesController
• 직원템플릿

찾지 못하면 각각의 인스턴스를 생성하지만 데이터를 파생할 모델이나 데이터를 표시하는 데 사용할 템플릿을 지정하지 않았기 때문에 아무것도 렌더링하지 않습니다. 이것이 명명 규칙이 중요한 이유입니다. 이를 통해 Ember는 수동으로 연결할 필요 없이 특정 경로와 관련된 작업을 처리하는 방법을 알 수 있습니다.

첫 번째 예에서는 모델을 정의하기 위해 단수형 "Employee"를 사용했습니다. 이는 의도적인 것입니다. "직원"이라는 이름의 특성상 직원이 0명부터 많을 수도 있으므로 직원 한 명 또는 직원 전체를 반환할 수 있는 유연성을 갖춘 모델을 구축하는 것이 중요합니다. 모델 자체는 나중에 사용할 컨트롤러를 모르기 때문에 모델에 대한 단일 명명 규칙은 Ember의 요구 사항이 아닙니다. 따라서 이름을 유연하게 지정할 수 있지만 일관성을 위해 이 규칙을 준수하면 코드 관리가 더 쉬워집니다.

또한 resource() 메서드를 사용하여 경로를 정의하기로 결정했습니다. 이 경우 특정 직원 정보에 대한 세부 정보 페이지를 관리하기 위해 중첩된 경로를 사용할 가능성이 높기 때문입니다. 중첩에 대해서는 이 시리즈의 뒷부분에서 논의하겠습니다.

중요한 점은 Ember에서는 일관된 명명 체계를 사용하여 많은 코드를 통해 관계를 명시적으로 정의하지 않고도 이러한 구성 요소를 함께 묶는 후크를 쉽게 관리할 수 있다는 것입니다.

Ember의 명명 규칙에 대한 자세한 내용은 프로젝트 웹사이트에서 확인할 수 있으며, 꼭 읽어야 합니다.

다음 단계: 앱 구축

이 시리즈의 다음 부분에서는 애플리케이션의 기반을 만드는 코드를 자세히 살펴보겠습니다.

우리는 Ember의 핵심 개념을 검토하고 프레임워크의 주요 고급 측면을 논의했습니다. 이 시리즈의 다음 부분에서는 애플리케이션의 기반을 만드는 코드를 자세히 살펴보겠습니다. 그동안 표현식 구문을 이해하려면 핸들바 설명서를 살펴보시기 바랍니다. 또한, 정말로 Ember를 사용하고 싶으시다면 Tuts+ Premium을 계속 지켜봐 주시기 바랍니다. Tuts+ Premium은 곧 Ember 기반 애플리케이션 구축을 안내하는 전체 과정을 제공할 것입니다!

이 기사 시작 부분에서 언급했듯이 Ember.js 핵심 팀 리더인 Yehuda Katz와 Tom Dale은 이 콘텐츠의 정확성을 검토하고 엄지손가락을 치켜세웠습니다. Ember 팀이 승인되었습니다! 나중에 봐요!

위 내용은 Ember.js의 세계를 받아들이세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!