Share
Ich hoffe, dass Sie sehen, dass Ember.js ein mächtiger, aber dennoch mit Überzeugungen versehener Rahmen ist. Wir haben nur die Oberfläche zerkratzt. Es gibt noch mehr zu lernen, bevor wir etwas wirklich Nützliches bauen können! Wir werden das Ember Starter Kit weiterhin verwenden. In diesem Teil der Serie werden wir den Zugriff auf und die Verwaltung von Daten in Ember überprüfen.
Im letzten Artikel haben wir mit einem statischen Satz von Farbnamen gearbeitet, die in einem Controller definiert wurden:
Accentsconagua
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); Dies ermöglichte es dem Controller, die Daten für den Computer verfügbar zu machen Index Vorlage. Das ist nett für eine Demo, aber im wirklichen Leben wird unsere Datenquelle kein hartcodiertes Array sein.
Das ist wo Modelle kommt herein. Modelle sind Objektdarstellungen der Daten, die Ihre Anwendung verwendet. Dies kann ein einfaches Array oder Daten sein, die dynamisch von einer RESTful-JSON-API abgerufen werden. Auf die Daten selbst wird durch Bezugnahme auf die Attribute des Modells zugegriffen. Wenn wir also ein Ergebnis wie dieses betrachten:
"login": "rey", "id": 1, "age": 45, "gender": "male"
Die im Modell angezeigten Attribute sind:
Auf die Daten selbst wird durch Verweis auf die Attribute des Modells zugegriffen.
Wie Sie dem obigen Code entnehmen können, können Sie einen statischen Speicher definieren. In Ember.Object können Sie jedoch meistens Ihre Modelle definieren. Durch Unterklassen Ember.Object, Sie können Daten zurückgeben (z. B. über einen Ajax-Aufruf) und Ihr Modell definieren. Sie können zwar Daten explizit in einem Controller festlegen, es wird jedoch immer empfohlen, ein Modell zu erstellen, um die Trennung von Bedenken und die Best Practices für die Organisation von Code einzuhalten.
Alternativ können Sie auch ein Schwester-Framework namens Ember Data verwenden. Es ist ein ORM-ähnlicher API- und Persistenzspeicher, aber ich muss betonen, dass es zum Zeitpunkt der Veröffentlichung in Fluss ist. Es hat viel Potenzial, aber die Nutzung Ember.Object ist zu dieser Zeit viel sicherer. Robin Ward, Mitbegründer von Discourse, schrieb einen großartigen Blogbeitrag zur Verwendung von Ember ohne Ember Data. Es beschreibt ihren Prozess, den ich für Sie zusammenbrechen werde.
Im folgenden Beispiel werde ich die inoffizielle Hacker News API verwenden, um JSON-basierte Daten aus der Nachrichtenressource abzurufen. Diese Daten werden in meinem Modell gespeichert und später von einem Controller zum Füllen einer Vorlage verwendet. Wenn wir uns die von der API zurückgegebenen Daten ansehen, können wir die Eigenschaften verstehen, mit denen wir arbeiten:
"nextId": null, "items": ["title": "Docker, Laufzeit des Linux-Containers: jetzt Open-Source", "url": "http://docker.io", "id": 5445387 , "commentCount": 39, "Punkte": 146, "postedAgo": "Vor 2 Stunden", "postedBy": "shykes", "title": "Was ist eigentlich falsch mit Yahoo \ u0027s Purchase of Summly "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," punkte ": 133," postedAgo ":" 2 Stunden ago "," postedBy ":" hoonose ",]," version ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "
Ich möchte mit dem arbeiten Artikel Eigenschaft, die alle Schlagzeilen und Story-Informationen enthält. Wenn Sie mit SQL-Datenbanken gearbeitet haben, denken Sie an jedes Element von Artikel als Datensatz und die Eigenschaftsnamen (d. h .: Titel, url, Ich würde, etc.) als Feldnamen. Es ist wichtig, das Layout zu erstellen, da diese Eigenschaftsnamen als Attribute unseres Modellobjekts verwendet werden. Dies ist ein idealer Schritt in die Erstellung des Modells.
Ember.Objectist die Hauptbasisklasse für alle Ember-Objekte, und wir werden sie unterteilen, um unser Modell unter Verwendung seines zu erstellenerweitern()Methode.
Dazu fügen wir folgenden Code hinzu js / app.js unmittelbar nach dem definierten Code App.IndexRoute:
App.Item = Ember.Object.extend ();
App.Item dient als Modellklasse für die Hacker-News-Daten, verfügt jedoch über keine Methoden zum Abrufen oder Bearbeiten dieser Daten. Also müssen wir diese definieren:
App.Item.reopenClass (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (function (Antwort) var items = [ ]; response.items.forEach (function (item) items.push (App.Item.create (item));); Elemente zurückgeben;);; Lassen Sie uns diesen Code aufschlüsseln. Zuerst verwenden wir Embers reopenClass () Methode, um unsere neuen Methoden in die App.Item Klasse, und Sie übergeben ein Objekt, das unsere gewünschten Methoden enthält. Für dieses Beispiel benötigen wir nur eine aufgerufene Methode alles(): Es werden alle Schlagzeilen von der Hacker News-Startseite zurückgegeben. Da jQuery Teil des Deals mit Ember ist, steht uns eine einfache Ajax-API zur Verfügung. Die API verwendet JSONP, um JSON-Daten zurückzugeben. also kann ich einfach verwenden $ .getJSON () um die Anfrage an:
$ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") Der "Rückruf =?" teilt jQuery mit, dass es sich um eine JSONP-Anforderung handelt, und die Daten (sobald sie abgerufen wurden) werden an einen anonymen Callback-Handler übergeben, der mit der Funktionalität von jQuery definiert wurde:
.dann (Funktion (Antwort) …);
Ich kann meine JSON-Daten problemlos in ein Ember-Objekt einpumpen.
Das Antwort Der Parameter enthält die JSON-Daten, sodass Sie die Datensätze durchlaufen und die lokalen Daten aktualisieren können Artikel Array mit Instanzen von App.Item. Zuletzt wird das neu aufgefüllte Array zurückgegeben, wenn alles() führt aus. Das sind viele Wörter, also lassen Sie mich zusammenfassen:
Ember.Object mit erweitern().reopenClass ().Artikel Objekt und schieben Sie es in ein Array.Wenn Sie sich aktualisieren index.html, Sie werden sehen, dass sich nichts geändert hat. Dies ist sinnvoll, da das Modell nur definiert wurde. wir haben nicht darauf zugegriffen.
Controller verhalten sich wie Proxys, geben Ihnen Zugriff auf die Attribute des Modells und lassen Vorlagen auf diese zugreifen, um die Anzeige dynamisch zu rendern. Controller können nicht nur auf Attribute eines zugeordneten Modells zugreifen, sondern auch andere Anwendungseigenschaften speichern, die beibehalten werden müssen, ohne auf einem Server gespeichert zu werden.
Derzeit hat unsere App den folgenden Controller (derjenige, der einen statischen Datensatz definiert):
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); Wir können unser Modell direkt mit verknüpfen App.IndexRoute Verwendung der Modell- Methode (AKA der Modellhaken):
App.IndexRoute = Ember.Route.extend (model: function () return App.Item.all (););
Denken Sie daran, dass Ember Ihren Controller definiert, wenn Sie ihn nicht explizit selbst definieren. Dies ist, was in diesem Fall passiert.
Hinter den Kulissen schafft Ember
IndexControllerals ein Beispiel vonEmber.ArrayController, und es verwendet das in derModell-Methode.
Jetzt müssen wir nur noch die Indexvorlage aktualisieren, um auf die neuen Attribute zugreifen zu können. Öffnung index.html, Wir können den folgenden Code für die Lenkervorlagen sehen:
# Jedes Element im Modell
Mit einer kleinen Änderung (Hinzufügen der Titel Eigenschaft), können wir sofort die von der Hacker News API zurückgegebenen Titel sehen:
item.title
Wenn Sie Ihren Browser jetzt aktualisieren, sollte Folgendes angezeigt werden:
Willkommen bei Ember.js
Wenn Sie weitere Informationen anzeigen möchten, fügen Sie einfach weitere Eigenschaften hinzu:
item.title - item.postedAgo von item.postedBy
Aktualisieren Sie, um die von Ihnen vorgenommenen Aktualisierungen anzuzeigen. Das ist die Schönheit von Lenkern; Es macht es einfach, neue Datenelemente zur Benutzeroberfläche hinzuzufügen.
Wie bereits erwähnt, können Controller auch dazu verwendet werden, statische Attribute zu definieren, die während der gesamten Lebensdauer Ihrer Anwendung bestehen bleiben müssen. Ich möchte beispielsweise bestimmte statische Inhalte wie folgt beibehalten:
App.IndexController = Ember.ObjectController.extend (headerName: 'Willkommen bei der Hacker News App', appVersion: 2.1);
Hier Unterklasse Ember.ObjectController einen neuen Controller für meine erstellen Index Route und Vorlage zum Arbeiten. Ich kann jetzt gehen index.html und aktualisiere meine Vorlage, um Folgendes zu ersetzen:
Willkommen bei Ember.js
mit:
headerName
Modelle sind Objektdarstellungen der Daten, die Ihre Anwendung verwendet.
Die Lenker übernehmen die angegebenen Attribute in meinem Controller und ersetzen dynamisch das headerName Platzhalter mit seinem Namensgeberwert. Es ist wichtig, zwei Dinge zu verstärken:
IndexController, Ember ist intelligent genug, um das vorhandene Modell, das über die Route verknüpft wurde, nicht zu überschreiben.Das ist ziemlich mächtig und flexibel!
Das Arbeiten mit Daten in Ember ist nicht schwierig. Tatsächlich ist es am schwierigsten, mit den verschiedenen APIs zu arbeiten, die es im Web gibt.
Die Tatsache, dass ich meine JSON-Daten problemlos in ein Ember-Objekt einpumpen kann, vereinfacht die Verwaltung erheblich - obwohl ich auf Client-Seite noch nie ein großer Fan von großen Datensätzen war, insbesondere wenn sie als Objekte dargestellt werden.
Das ist etwas, woran ich noch mehr testen muss, und ich hoffe, dass Ember Data das alles trivial macht.
Nachdem dies gesagt wurde, berührte ich kurz die Vorlagen in diesem Artikel. Sie sind sehr wichtig… so sehr, dass ich dieses Thema in einem eigenen Artikel behandeln möchte. Im nächsten Artikel gehen wir darauf ein, wie Sie mit Hilfe von Handelbars Ihre Benutzeroberfläche erstellen und die verschiedenen Richtlinien des Vorlagen-Frameworks detaillierter darstellen können.
