Share
Anmerkung des Herausgebers: Das Ember.js-Team hat zu einem beschleunigten Veröffentlichungszeitplan gewechselt und liegt zu diesem Veröffentlichungsdatum auf Version 1.2.0. Dieses Tutorial wurde vor Version 1.0 geschrieben, viele Konzepte sind jedoch weiterhin anwendbar. Wir bemühen uns, zeitnahe Inhalte in Auftrag zu geben, und diese Situationen treten von Zeit zu Zeit auf. Wir werden daran arbeiten, dies in Zukunft zu aktualisieren.
In Teil 3 meiner Ember-Serie habe ich Ihnen gezeigt, wie Sie mit Ember's Daten interagieren können Ember.Object Hauptbasisklasse zum Erstellen von Objekten, die die Methoden und Eigenschaften definieren, die als Wrapper für Ihre Daten dienen. Hier ist ein Beispiel:
Accentsconagua
App.Item = Ember.Object.extend (); 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;); In diesem Code haben wir eine Unterklasse Ember.Object Verwendung der "erweitern()"und erstellen Sie eine benutzerdefinierte Methode namens"alles()"Das fordert Hacker News nach JSON-formatierten Ergebnissen seines Newsfeeds an.
Diese Methode funktioniert definitiv und wird von Ember-based Discourse sogar als ihre Art und Weise gefördert, erfordert dies aber Sie Erarbeiten Sie die API, mit der Sie die Daten referenzieren möchten. Die meisten MVC-Frameworks verfügen in der Regel über ORM-ähnliche Funktionen. Wenn Sie sich also beispielsweise an Rails gewöhnt haben, sind Sie mit den Vorteilen von ActiveRecord bestens vertraut, mit deren Hilfe die Interaktion mit Daten erheblich vereinfacht wird.
Das Ember-Team wollte dasselbe tun, aber sein Hauptziel war es, zunächst eine stabile Version v1 des Core-Frameworks herauszugeben, um sicherzustellen, dass ergänzende Komponenten auf einem stabilen Fundament aufbauen können. Ich begrüße das tatsächlich und erwähnte tatsächlich die Tatsache, dass Sie Ember Data aus diesem Grund zurückhalten sollten.
Jetzt, da Ember RC8 aus ist und v1 scheint, um die Ecke zu kommen, war es ein guter Zeitpunkt, Ember Data zu erkunden und zu sehen, was es bietet.
Das erste, was ich betonen möchte, ist, dass Ember Data ein work in progress ist und in der gleichen Weise, wie Ember begonnen hat, wahrscheinlich eine Reihe von API-Änderungen in den nächsten Monaten zu sehen sein wird. Dies ist zwar nicht ideal, aber Sie sollten sich zunächst mit der Strukturierung Ihrer Apps mithilfe der Bibliothek vertraut machen. Um Ihnen eine gute Beschreibung dessen zu geben, was Ember Data bietet, habe ich die gut geschriebene Beschreibung von der GitHub-Seite kopiert:
Ember Data ist eine Bibliothek zum Laden von Daten von einer Persistenzschicht (z. B. einer JSON-API), zum Zuordnen dieser Daten zu einer Reihe von Modellen in Ihrer Clientanwendung, zum Aktualisieren dieser Modelle und zum Speichern der Änderungen in einer Persistenzschicht. Es bietet viele der Funktionen, die Sie in serverseitigen ORMs wie ActiveRecord finden würden, ist jedoch speziell für die einzigartige Umgebung von JavaScript im Browser konzipiert.
Wie ich bereits sagte, soll es eine Menge der Komplexität der Arbeit mit Daten herausfiltern.
Wenn Sie meine vorherigen Tutorials gelesen haben, sollten Sie mit dem Einrichten einer Seite für Ember sehr vertraut sein. Wenn Sie dies nicht getan haben, sollten Sie zur Ember.js-Startseite gehen und das Starter-Kit erwerben. Sie können es direkt in der Mitte der Seite finden, da es über einen großen Knopf angezeigt wird. Dadurch erhalten Sie die aktuellste Version von Ember, die Sie benötigen, um mit Ember Data arbeiten zu können. Eine einfachste Möglichkeit, eine herunterladbare Version von Ember Data zu erhalten, ist die Verwendung der API-Dokumente für Modelle, Scrollen Sie nach unten und laden Sie die Bibliothek herunter. Zusätzlich können Sie in die gehen baut Seite, um die neuesten Builds einer beliebigen Ember-Bibliothek anzuzeigen.
Das Hinzufügen von Ember Data ist so einfach wie das Hinzufügen einer weiteren JavaScript-Datei zum Mix:
Damit haben Sie jetzt Zugriff auf die Objekte, Methoden und Eigenschaften von Ember Data.
Ohne jegliche Konfiguration kann Ember Data Datensätze und Beziehungen laden und speichern, die über eine RESTful-JSON-API bereitgestellt werden, sofern bestimmte Konventionen eingehalten werden.
Ember verwendet ein spezielles Objekt namens a Geschäft Modelle laden und Daten abrufen und basiert auf dem Ember DS.Store Klasse. So definieren Sie einen neuen Store:
App.Store = DS.Store.extend (…);
Wenn Sie sich an meine vorherigen Artikel erinnern, "App" ist nur ein Namespace, der für Objekte, Methoden und Eigenschaften der Anwendungsebene für die Anwendung erstellt wird. Es ist zwar kein reserviertes Wort in Ember, aber ich würde Sie dringend bitten, denselben Namen zu verwenden wie bei jedem Tutorial und jeder Demo, die ich je gesehen habe.
Der von Ihnen erstellte Store speichert die von Ihnen erstellten Modelle und dient als Schnittstelle zu dem Server, den Sie in Ihrem Adapter definieren. Standardmäßig erstellt und erstellt Ember Data einen REST-Adapter, der auf dem Speicher basiert DS.RestAdapter Klasse. Wenn Sie einfach den Code oben definiert haben, ist standardmäßig ein Adapter zugeordnet. Glutzauber vom Feinsten. Sie können auch einen Fixture-Adapter verwenden, wenn Sie mit speicherinternen Daten arbeiten (z. B. JSON, die Sie aus Code laden). Da es sich jedoch um API-Aufrufe handelt, ist der REST-Adapter besser geeignet.
Sie können auch einen eigenen Adapter für die Situationen definieren, in denen Sie die Benutzeroberfläche mit dem Server besser steuern können Adapter Eigenschaft innerhalb Ihrer Ladenerklärung:
App.Store = DS.Store.extend (adapter: 'App.MyCustomAdapter');
Der Code, den ich oben in diesem Lernprogramm aufgeführt habe, war ein Beispiel für die Verwendung Ember.Object um die Modelle für Ihre Anwendung zu erstellen. Die Dinge ändern sich ein wenig, wenn Sie Modelle über Ember Data definieren. Ember Data bietet ein anderes Objekt namens DS.Model welche Sie für jedes Modell, das Sie erstellen möchten, eine Unterklasse bildet. Nehmen Sie zum Beispiel den Code von oben:
App.Item = Ember.Object.extend ();
Es würde jetzt so aussehen:
App.Item = DS.Model.Extend ()
Es gibt keinen großen Unterschied in Bezug auf das Erscheinungsbild, aber einen großen Unterschied in Bezug auf die Funktionalität, da Sie jetzt auf die Funktionen des REST-Adapters sowie auf die integrierten Beziehungen von Ember Data wie One-to-One, One-to-Many zugreifen können und mehr. Der Hauptvorteil besteht jedoch darin, dass Ember Data die Hooks für die Interaktion mit Ihren Daten über Ihre Modelle bereitstellt, anstatt dass Sie Ihre eigenen Rollen ausführen müssen. Den Code erneut von oben referenzieren:
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));); Artikel zurücksenden; ); Während ich meine eigene Methode erstellen musste, um alle Ergebnisse meines JSON-Aufrufs zurückzugeben, bietet Ember Data eine finden() Methode, die genau dies tut und auch dazu dient, die Ergebnisse zu filtern. Im Wesentlichen muss ich also nur den folgenden Aufruf ausführen, um alle meine Unterlagen zurückzugeben:
App.Item.find ();
Das finden() Diese Methode sendet eine Ajax-Anfrage an die URL.
Genau das zieht Ember so viele Entwickler an. die Voraussicht, die Dinge zu erleichtern.
Dabei ist zu beachten, dass es wichtig ist, die Attribute, die Sie später verwenden möchten (z. B. in Ihren Vorlagen), innerhalb des Modells zu definieren. Das ist einfach zu machen:
App.Post = DS.Model.extend (title: DS.attr ('string')); In meiner Demo-App möchte ich die title-Eigenschaft verwenden, die über JSON zurückgegeben wird attr () Geben Sie an, welche Attribute ein Modell zur Verfügung hat.
Eines möchte ich erwähnen, dass Ember Data ist unglaublich wählerisch über die Struktur der zurückgegebenen JSON. Da Ember Verzeichnisstrukturen zum Erkennen bestimmter Teile Ihrer Anwendungen nutzt (erinnern Sie sich an die Namenskonventionen, die wir in meinem ersten Ember-Artikel besprochen haben?), Werden bestimmte Annahmen hinsichtlich der Struktur der JSON-Daten getroffen. Es muss ein benanntes Stammverzeichnis vorhanden sein, das zur Identifizierung der zurückgegebenen Daten verwendet wird. Das meine ich damit:
'posts': ['id': 1, 'title': 'Ein Freund von mir hat gerade das geschrieben.', 'url': 'http://i.imgur.com/9pw20NY.jpg'] [js]Wenn Sie es so definiert hätten:
[js] 'id': '1', 'title': 'Ein Freund von mir hat gerade dies geschrieben.', 'url': 'http://i.imgur.com/9pw20NY.jpg', 'id': '2', 'title': 'Ein Freund hat dies gerade gepostet.', 'url': 'http://i.imgur.com/9pw20NY.jpg',
Ember Data hätte den folgenden Fehler total abgelehnt:
Ihr Server hat einen Hash mit der Schlüssel-ID zurückgegeben, aber Sie haben keine Zuordnung dafür.
Der Grund ist, dass das Modell aufgerufen wird "App.Post", Ember Data erwartet eine URL namens "Posts", von der die Daten abgerufen werden. Wenn ich also meinen Shop als solchen definiert habe:
App.Store = DS.Store.extend (url: 'http: //emberdata.local');
und mein Model gefällt mir:
App.Post = DS.Model.extend (title: DS.attr ('string')); Ember Data würde davon ausgehen, dass die Ajax-Anfrage von der finden() Methode würde so aussehen:
http: //emberdata.local/posts
Wenn Sie eine bestimmte ID anfordern möchten (wie find (12)), würde dies folgendermaßen aussehen:
http: //emberdata.local/posts/12
Diese Ausgabe hat mich wahnsinnig gemacht, aber bei einer Suche fanden sich viele Diskussionen darüber. Wenn Sie Ihre JSON-Ergebnisse nicht auf diese Weise einrichten können, müssen Sie einen benutzerdefinierten Adapter erstellen, um die Ergebnisse zu massieren, um sie ordnungsgemäß serialisieren zu können, bevor Sie sie verwenden können. Ich werde das hier nicht behandeln, aber ich werde bald mehr davon erkunden.
Ich wollte dieses Tutorial absichtlich einfach halten, weil ich weiß, dass sich Ember Data ändert und ich einen kurzen Überblick über die Inhalte geben wollte. Also habe ich eine schnelle Demo-App entwickelt, die Ember Data verwendet, um JSON-Daten von meinem eigenen lokalen Server abzurufen. Schauen wir uns den Code an.
Zuerst erstelle ich meinen Anwendungs-Namespace (was Sie für jede Ember-App tun würden):
// Erstelle unsere Anwendung App = Ember.Application.create ();
Als Nächstes definiere ich meinen Datenspeicher und erkläre das url von wo das Modell die Daten abruft:
App.Store = DS.Store.extend (url: 'http: //emberdata.local';);
Im Modell gebe ich das Attribut an: Titel, was ich später in meiner Vorlage verwenden werde:
// Unser Modell App.Post = DS.Model.extend (title: DS.attr ('string')); Zum Schluss ordne ich das Modell über den Modell-Hook der Route zu. Beachten Sie, dass ich die vordefinierte Ember Data-Methode verwende finden() So ziehen Sie meine JSON-Daten sofort zurück, sobald die App gestartet wird:
// Unsere Standardroute. App.IndexRoute = Ember.Route.extend (model: function () return App.Post.find (););
In der Vorlage für die Stammseite (Index) verwende ich die #jeder Lenker-Direktive zum Durchsuchen der Ergebnisse meiner JSON-Daten und Rendern des Titels aller meiner Beiträge:
Das ist es! Kein Ajax-Aufruf oder spezielle Methoden, um mit meinen Daten zu arbeiten. Ember Data kümmerte sich um den XHR-Aufruf und die Speicherung der Daten.
Nun, das ist unglaublich simpel und ich möchte Sie nicht glauben lassen, dass dies alles Einhörner und Welpen sind. Als ich den Prozess der Arbeit mit Ember Data durchlief, wollte ich gerne wieder verwenden Ember.Object wo ich mehr Kontrolle hatte. Mir ist aber auch klar, dass viel Arbeit an der Verbesserung von Ember Data läuft, insbesondere in Bezug auf die Verwaltung verschiedener Datenergebnisse. Es ist daher wichtig, zumindest den Prozess des Verstehens der Funktionsweise dieses Dings zu stimulieren und dem Team sogar konstruktives Feedback zu geben.
Ich fordere Sie daher dringend auf, einzusteigen und damit zu basteln, vor allem diejenigen, die über einen starken ORM-Hintergrund verfügen und die Richtung von Ember Data mitgestalten können. Jetzt ist die beste Zeit dafür.
