Ember.js 3부 시작: 심층 분석

Ember.js가 강력하지만 독선적인 프레임워크라는 것을 깨닫기 시작하길 바랍니다. 우리는 단지 표면적인 부분만을 살펴봤을 뿐입니다. 진정으로 유용한 것을 만들기 전에 배워야 할 것이 더 많습니다! 우리는 계속해서 Ember 스타터 키트를 사용할 것입니다. 시리즈의 이번 부분에서는 Ember에서 데이터에 액세스하고 관리하는 방법을 검토하겠습니다.

---

사용 데이터

이전 기사에서는 컨트롤러에 정의된 정적 색상 이름 세트를 사용했습니다.

으아악

이렇게 하면 컨트롤러가 인덱싱된 템플릿에 데이터를 노출할 수 있습니다. 데모용으로는 귀엽지만 실제로는 데이터 소스가 하드코딩된 배열이 아닙니다.

모델들이 들어오는 곳이에요. 모델은 애플리케이션에서 사용되는 데이터의 객체 표현입니다. 이는 간단한 배열이거나 RESTful JSON API에서 동적으로 검색된 데이터일 수 있습니다. 데이터 자체는 모델의 속성을 참조하여 액세스됩니다. 결과를 다음과 같이 보면:

으아악

모델에 노출된 속성은 다음과 같습니다.

• 로그인
• 손
• 나이
• 성별

모델의 속성을 참조하여 데이터 자체에 액세스하세요.

위 코드에서 볼 수 있듯이 정적 저장소를 정의할 수도 있지만 대부분의 경우 Ember.Object를 사용하여 모델을 정의하게 됩니다. 서브클래싱 Ember.Object을 통해 데이터를 반환하고(예: Ajax 호출을 통해) 모델을 정의할 수 있습니다. 컨트롤러에서 데이터를 명시적으로 설정할 수 있지만 항상 관심사 분리 및 코드 구성 모범 사례를 준수하기 위해 모델을 만드는 것이 좋습니다.

또는 Ember Data라는 자매 프레임워크를 사용할 수도 있습니다. 이는 ORM과 유사한 API이자 지속성 저장소이지만 이 글을 쓰는 시점에서는 유동적이라는 점을 강조하고 싶습니다. 잠재력이 많지만 지금은 Ember.Object을 사용하는 것이 더 안전합니다. Discourse의 공동 창립자인 Robin Ward는 Ember 데이터 없이 Ember를 사용하는 방법에 대한 훌륭한 블로그 게시물을 작성했습니다. 여기에는 프로세스가 간략하게 설명되어 있으며 이를 자세히 설명해 드리겠습니다.

---

모델 정의

아래 예에서는 비공식 Hacker News API를 사용하여 뉴스 소스에서 JSON 기반 데이터를 추출하겠습니다. 이 데이터는 내 모델에 저장되며 나중에 컨트롤러에서 템플릿을 채우는 데 사용됩니다. API에서 반환된 데이터를 보면 우리가 사용할 속성을 이해할 수 있습니다.

으아악

items 属性，其中包含所有标题和故事信息。如果您使用过 SQL 数据库，请将 items 的每个元素视为一条记录，并将属性名称（即：title、url、id 등)을 필드 이름으로 사용하고 싶습니다. 이러한 속성 이름은 모델 생성을 위한 완벽한 인터페이스인 모델 개체의 속성으로 사용되므로 레이아웃을 이해하는 것이 중요합니다.

Ember.Object 是所有 Ember 对象的主要基类，我们将对其进行子类化以使用其 extend()은 모든 Ember 객체의 기본 기본 클래스이며 extend() 메서드를 사용하여 모델을 생성하기 위해 이를 서브클래스화할 것입니다.

이를 위해 App.IndexRoutejs/app.js에 를 정의하는 코드 바로 뒤에 다음 코드를 추가합니다.

으아악

App.Item Hacker News 데이터의 모델 클래스로 사용되지만 해당 데이터를 검색하거나 조작하는 메서드가 없습니다. 따라서 다음을 정의해야 합니다.

으아악

이 코드를 분석해 보겠습니다. 먼저 Ember의 reopenClass() 메서드를 사용하여 reopenClass() 方法将新方法添加到 App.Item 类中，然后向其传递一个包含我们所需方法的对象。对于此示例，我们只需要一个名为 all() 的方法：它返回黑客新闻首页的所有标题。因为 jQuery 是 Ember 协议的一部分，所以我们可以使用它简单的 Ajax API。 API使用JSONP返回JSON数据；所以，我可以使用 $.getJSON() 클래스에 새 메서드를 추가한 다음 필요한 메서드가 포함된 객체에 전달합니다. 이 예에서는 all()이라는 메서드만 필요합니다. 이 메서드는 Hacker News 홈페이지의 모든 헤드라인을 반환합니다. jQuery는 Ember 프로토콜의 일부이므로 간단한 Ajax API를 사용할 수 있습니다. API는 JSONP를 사용하여 JSON 데이터를 반환하므로 $.getJSON()을 사용하여 다음을 요청할 수 있습니다.

으아악

"callback=?"은 이것이 JSONP 요청이고 데이터(검색된 후)가 jQuery의 Promise 기능을 사용하여 정의된 익명 콜백 핸들러로 전달될 것이라고 jQuery에 알려줍니다. 으아악

JSON 데이터를 Ember 개체에 쉽게 삽입할 수 있습니다.

response 매개변수에는 JSON 데이터가 포함되어 있어 레코드를 반복하고

인스턴스로 로컬 items 배열을 업데이트할 수 있습니다. 마지막으로 all()이 실행되면 새로 채워진 배열을 반환합니다. 너무 많이 말했으니 요약해 보겠습니다. response 参数包含 JSON 数据，允许您循环记录并使用 App.Item 的实例更新本地 items 数组。最后，当 all()

• 通过使用 extend() 子类化 Ember.Object 来创建新模型类。
• 使用 reopenClass() 添加模型方法。
• 进行 Ajax 调用来检索您的数据。
• 循环数据，创建 Item 对象并将其推入数组中。
• 方法执行时返回数组。

如果您刷新index.html，您将看到没有任何变化。这是有道理的，因为模型刚刚被定义；我们还没有访问过它。

---

公开您的数据

控制器的作用类似于代理，使您可以访问模型的属性并允许模板访问它们以便动态渲染显示。除了从关联模型访问属性之外，控制器还可以存储需要持久保存的其他应用程序属性，而无需保存到服务器。

目前，我们的应用程序具有以下控制器（定义静态数据集的控制器）：

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

我们可以使用 model 方法（又名模型钩子）直接将我们的模型与 App.IndexRoute 关联起来：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});

请记住，如果您自己没有显式定义控制器，那么 Ember 会定义您的控制器，这就是本例中发生的情况。

在幕后，Ember 创建 IndexController 作为 Ember.ArrayController 的实例，并使用 model 方法中指定的模型。

现在我们只需要更新索引模板即可访问新属性。打开index.html，我们可以看到以下Handlebars模板代码：

{{#each item in model}}
    <li>{{item}}</li>
{{/each}}

通过一个小更改（添加 title 属性），我们可以立即看到从 Hacker News API 返回的标题：

{{item.title}}

如果您现在刷新浏览器，您应该会看到类似以下内容的内容：

<h3 id="Welcome-to-Ember-js">Welcome to Ember.js</h3>
<ul><li>Persona is distributed. Today.</li>
<li>21 graphs that show America's health-care prices are ludicrous</li>
<li>10 000 concurrent real-time connections to Django</li>
<li>Docker, the Linux container runtime: now open-source</li>
<li>Let's Say FeedBurner Shuts Down…</li></ul>

如果您想显示更多信息，只需添加更多属性：

{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}

刷新即可查看您所做的更新。这就是 Handlebars 的魅力所在；它使得向用户界面添加新数据元素变得微不足道。

正如我之前提到的，控制器还可以用于定义需要在应用程序的整个生命周期中保留的静态属性。例如，我可能想保留某些静态内容，如下所示：

App.IndexController = Ember.ObjectController.extend({
  headerName: 'Welcome to the Hacker News App',
  appVersion:  2.1
});

在这里，我将 Ember.ObjectController 子类化，为我的 index 路由和模板创建一个新的控制器。我现在可以转到 index.html 并更新我的模板以替换以下内容：

<h2 id="Welcome-to-Ember-js">Welcome to Ember.js</h2>

与：

<h2 id="headerName">{{headerName}}</h2>

模型是应用程序使用的数据的对象表示。

Handlebars 将采用我的控制器中的指定属性，并用其同名值动态替换 {{headerName}} 占位符。强调两件事很重要：

• 通过遵守 Ember 的命名约定，我无需进行任何接线即可将控制器与索引模板一起使用。
• 即使我显式创建了 IndexController，Ember 也足够聪明，不会覆盖通过路由关联的现有模型。

这是非常强大且灵活的东西！

---

下一步...模板

在 Ember 中处理数据并不困难。实际上，最困难的部分是使用网络上大量的各种 API。

事实上，我可以轻松地将 JSON 数据输入到 Ember 对象中，这使得管理变得更加容易 — 尽管我从来都不是客户端大型数据集的忠实粉丝，尤其是当表示为对象时.

这是我必须做更多测试的事情，我希望 Ember Data 能让这一切变得微不足道。

话虽如此，我在本文中简要介绍了模板。它们非常重要……以至于我想在自己的文章中讨论这个主题。因此，在下一篇文章中，我们将介绍如何利用 Handelbars 构建用户界面，并深入了解模板框架提供的各种指令。

위 내용은 Ember.js 3부 시작: 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!