Betreten Sie Ember.js Teil 3: Ein tieferer Einblick

Ich hoffe, Sie beginnen zu erkennen, dass Ember.js ein leistungsstarkes, aber eigensinniges Framework ist. Wir haben nur an der Oberfläche gekratzt; es gibt noch viel zu lernen, bevor wir etwas wirklich Nützliches bauen können! Wir werden weiterhin das Ember-Starterkit verwenden. In diesem Teil der Serie besprechen wir, wie man in Ember auf Daten zugreift und diese verwaltet.

---

Nutzungsdaten

Im vorherigen Artikel haben wir einen statischen Satz von Farbnamen verwendet, die im Controller definiert sind:

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

Dadurch kann der Controller Daten der indiziertenVorlage zugänglich machen. Für Demos ist das nett, aber im wirklichen Leben wäre unsere Datenquelle kein fest codiertes Array.

Hier kommen Models ins Spiel. Ein Modell ist eine Objektdarstellung von Daten, die von einer Anwendung verwendet werden. Dabei kann es sich um ein einfaches Array oder Daten handeln, die dynamisch von einer RESTful-JSON-API abgerufen werden. Der Zugriff auf die Daten selbst erfolgt durch Verweis auf die Eigenschaften des Modells. Wenn wir uns die Ergebnisse also so ansehen:

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

Die im Modell angezeigten Eigenschaften sind:

• Anmelden
• Hände
• Alter
• Geschlecht

Greifen Sie auf die Daten selbst zu, indem Sie auf die Eigenschaften des Modells verweisen.

Wie Sie dem obigen Code entnehmen können, können Sie einen statischen Speicher definieren, aber meistens verwenden Sie Ember.Object, um das Modell zu definieren. Durch die Unterklassenbildung Ember.Object können Sie Daten zurückgeben (z. B. über Ajax-Aufrufe) und Ihr Modell definieren. Obwohl Sie Daten explizit im Controller festlegen können, wird immer empfohlen, ein Modell zu erstellen, um die Trennung von Belangen und Best Practices für die Code-Organisation einzuhalten.

Alternativ können Sie ein Schwester-Framework namens Ember Data verwenden. Es handelt sich um eine ORM-ähnliche API und einen Persistenzspeicher, aber ich muss betonen, dass sie sich zum Zeitpunkt des Verfassens dieses Artikels im Wandel befindet. Es hat viel Potenzial, ist aber zum jetzigen Zeitpunkt sicherer zu nutzen Ember.Object. Robin Ward, Mitbegründer von Discourse, hat einen tollen Blogbeitrag über die Verwendung von Ember ohne Ember-Daten geschrieben. Es beschreibt ihren Prozess und ich werde ihn für Sie aufschlüsseln.

---

Modell definieren

Im folgenden Beispiel verwende ich die inoffizielle Hacker News API, um JSON-basierte Daten aus einer Nachrichtenquelle zu extrahieren. Diese Daten werden in meinem Modell gespeichert und später vom Controller zum Füllen der Vorlage verwendet. Wenn wir uns die von der API zurückgegebenen Daten ansehen, können wir die Eigenschaften verstehen, die wir verwenden werden:

{
  "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)\/"
}

Ich möchte items 属性，其中包含所有标题和故事信息。如果您使用过 SQL 数据库，请将 items 的每个元素视为一条记录，并将属性名称（即：title、url、id usw.) als Feldnamen verwenden. Das Verständnis des Layouts ist wichtig, da diese Eigenschaftsnamen als Eigenschaften des Modellobjekts verwendet werden, das eine perfekte Schnittstelle zum Erstellen von Modellen darstellt.

Ember.Object 是所有 Ember 对象的主要基类，我们将对其进行子类化以使用其 extend() ist die Hauptbasisklasse für alle Ember-Objekte und wir werden sie in eine Unterklasse umwandeln, um unser Modell mit der Methode extend() zu erstellen.

Dazu fügen wir den folgenden Code zu App.IndexRoutejs/app.js hinzu, unmittelbar nach dem Code, der definiert:

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

App.Item Wird als Modellklasse für Hacker News-Daten verwendet, verfügt jedoch über keine Methoden zum Abrufen oder Bearbeiten dieser Daten. Deshalb müssen wir diese definieren:

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;
      });
  }
});

Lassen Sie uns diesen Code aufschlüsseln. Zuerst fügen wir der reopenClass() 方法将新方法添加到 App.Item 类中，然后向其传递一个包含我们所需方法的对象。对于此示例，我们只需要一个名为 all() 的方法：它返回黑客新闻首页的所有标题。因为 jQuery 是 Ember 协议的一部分，所以我们可以使用它简单的 Ajax API。 API使用JSONP返回JSON数据；所以，我可以使用 $.getJSON()-Klasse eine neue Methode hinzu, indem wir die reopenClass()-Methode von Ember verwenden, und übergeben ihr dann ein Objekt, das die von uns benötigte Methode enthält. Für dieses Beispiel benötigen wir nur eine Methode namens all(): Sie gibt alle Schlagzeilen der Hacker News-Homepage zurück. Da jQuery Teil des Ember-Protokolls ist, können wir dessen einfache Ajax-API verwenden. Die API verwendet JSONP, um JSON-Daten zurückzugeben. Daher kann ich mit $.getJSON() eine Anfrage stellen an:

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

„callback=?“ teilt jQuery mit, dass es sich um eine JSONP-Anfrage handelt und die Daten (sobald sie abgerufen wurden) an einen anonymen Callback-Handler übergeben werden, der mit der Promise-Funktion von jQuery definiert wurde:

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

Ich kann JSON-Daten problemlos in Ember-Objekte einfügen.

Der Parameter

response enthält JSON-Daten, sodass Sie die Datensätze durchlaufen und das lokale Array items mit einer Instanz von response 参数包含 JSON 数据，允许您循环记录并使用 App.Item 的实例更新本地 items 数组。最后，当 all() aktualisieren können. Wenn schließlich all() ausgeführt wird, geben wir das neu gefüllte Array zurück. Nachdem ich so viel gesagt habe, möchte ich noch einmal zusammenfassen:

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

Das obige ist der detaillierte Inhalt vonBetreten Sie Ember.js Teil 3: Ein tieferer Einblick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!