Entrez dans la troisième partie d'Ember.js : une plongée plus approfondie

J'espère que vous commencerez à réaliser qu'Ember.js est un framework puissant mais opiniâtre. Nous n'en avons qu'effleuré la surface ; il reste encore beaucoup à apprendre avant de pouvoir créer quelque chose de vraiment utile ! Nous continuerons à utiliser le kit de démarrage Ember. Dans cette partie de la série, nous verrons comment accéder et gérer les données dans Ember.

---

Données d'utilisation

Dans l'article précédent, nous avons utilisé un ensemble statique de noms de couleurs définis dans le contrôleur :

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

Cela permet au contrôleur d'exposer les données au modèle indexé. C'est mignon pour les démos, mais dans la vraie vie, notre source de données ne serait pas un tableau codé en dur.

C'est là qu'interviennent les modèles. Un modèle est une représentation objet des données utilisées par une application. Il peut s'agir d'un simple tableau ou de données récupérées dynamiquement à partir d'une API RESTful JSON. Les données elles-mêmes sont accessibles en référençant les propriétés du modèle. Donc si on regarde les résultats comme ceci :

{
   "login": "rey",
   "id": 1,
   "age": 45,
   "gender": "male"
}

Les propriétés exposées dans le modèle sont :

• connexion
• Mains
• âge
• genre

Accédez aux données elles-mêmes en référençant les propriétés du modèle.

Comme vous pouvez le voir dans le code ci-dessus, vous pouvez définir un stockage statique, mais la plupart du temps vous utiliserez Ember.Object pour définir le modèle. En sous-classant Ember.Object vous pourrez retourner des données (ex : via des appels Ajax) et définir votre modèle. Bien que vous puissiez définir explicitement les données dans le contrôleur, il est toujours recommandé de créer un modèle afin de respecter la séparation des préoccupations et les meilleures pratiques d'organisation du code.

Vous pouvez également utiliser un framework frère appelé Ember Data. Il s'agit d'une API et d'un magasin de persistance de type ORM, mais je dois souligner qu'il est en pleine évolution au moment de la rédaction. Il a beaucoup de potentiel, mais il est plus sûr de l'utiliser Ember.Object en ce moment. Le co-fondateur de Discourse, Robin Ward, a écrit un excellent article de blog sur l'utilisation d'Ember sans les données Ember. Il décrit leur processus et je vais le détailler pour vous.

---

Définir le modèle

Dans l'exemple ci-dessous, j'utiliserai l'API non officielle Hacker News pour extraire des données basées sur JSON à partir d'une source d'informations. Ces données seront stockées dans mon modèle et utilisées ultérieurement par le contrôleur pour remplir le modèle. Si nous regardons les données renvoyées par l'API, nous pouvons comprendre les propriétés que nous utiliserons :

{
  "nextId": null,
  "items": [{
          "title": "Docker, the Linux container runtime: now open-source",
          "url": "http://docker.io",
          "id": 5445387,
          "commentCount": 39,
          "points": 146,
          "postedAgo": "2 hours ago",
          "postedBy": "shykes"
      }, {
          "title": "What\u0027s Actually Wrong with Yahoo\u0027s Purchase of Summly",
          "url": "http://hackingdistributed.com/2013/03/26/summly/",
          "id": 5445159,
          "commentCount": 99,
          "points": 133,
          "postedAgo": "2 hours ago",
          "postedBy": "hoonose"
      },
  ],
  "version": "1.0",
  "cachedOnUTC": "\/Date(1364333188244)\/"
}

Je souhaite utiliser items 属性，其中包含所有标题和故事信息。如果您使用过 SQL 数据库，请将 items 的每个元素视为一条记录，并将属性名称（即：title、url、id etc.) comme noms de champs. Il est important de comprendre la disposition car ces noms de propriétés seront utilisés comme propriétés de l'objet modèle, qui constitue une interface parfaite pour créer des modèles.

Ember.Object 是所有 Ember 对象的主要基类，我们将对其进行子类化以使用其 extend() est la classe de base principale pour tous les objets Ember et nous la sous-classerons pour créer notre modèle en utilisant sa méthode extend().

Pour ce faire, nous ajouterons le code suivant à App.IndexRoutejs/app.js immédiatement après le code qui définit :

App.Item = Ember.Object.extend();

App.Item Utilisé comme classe modèle pour les données Hacker News, mais il n'a aucune méthode pour récupérer ou manipuler ces données. Nous devons donc les définir :

App.Item.reopenClass({
  all: function() {
      return $.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?").then(function(response) {
        var items = [];

        response.items.forEach( function (item) {
          items.push( App.Item.create(item) );
        });

	      return items;
      });
  }
});

Décomposons ce code. Tout d'abord, nous ajoutons une nouvelle méthode à la classe reopenClass() 方法将新方法添加到 App.Item 类中，然后向其传递一个包含我们所需方法的对象。对于此示例，我们只需要一个名为 all() 的方法：它返回黑客新闻首页的所有标题。因为 jQuery 是 Ember 协议的一部分，所以我们可以使用它简单的 Ajax API。 API使用JSONP返回JSON数据；所以，我可以使用 $.getJSON() en utilisant la méthode reopenClass() d'Ember, puis en lui passant un objet contenant la méthode dont nous avons besoin. Pour cet exemple, nous n'avons besoin que d'une méthode appelée all() : elle renvoie tous les titres de la page d'accueil de Hacker News. Parce que jQuery fait partie du protocole Ember, nous pouvons utiliser sa simple API Ajax. L'API utilise JSONP pour renvoyer les données JSON ; je peux donc utiliser $.getJSON() pour faire une requête à :

$.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?")

"callback=?" indique à jQuery qu'il s'agit d'une requête JSONP et que les données (une fois récupérées) seront transmises à un gestionnaire de rappel anonyme défini à l'aide de la fonctionnalité Promise de jQuery :

.then(function(response) {...});

Je peux facilement injecter des données JSON dans des objets Ember.

Le paramètre

response contient des données JSON, vous permettant de parcourir les enregistrements et de mettre à jour le tableau items local avec une instance de response 参数包含 JSON 数据，允许您循环记录并使用 App.Item 的实例更新本地 items 数组。最后，当 all(). Enfin, lorsque all() s'exécute, nous renvoyons le tableau nouvellement rempli. Cela dit, permettez-moi de résumer :

• 通过使用 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 构建用户界面，并深入了解模板框架提供的各种指令。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!