Share
In meinem vorherigen Tutorial habe ich die Verwendung beschrieben Ember.Object um Ihre Modelle zu definieren und mit Datensätzen zu arbeiten. In diesem Abschnitt werden wir uns genauer ansehen, wie Ember das Handlebars-Templating-Framework zum Definieren der Benutzeroberfläche Ihrer App verwendet.
Die meisten serverseitigen Entwickler verwenden normalerweise Vorlagen, um Markierungen zu definieren, die dynamisch dynamisch gefüllt werden. Wenn Sie jemals ASP.NET, ColdFusion, PHP oder Rails verwendet haben, ist es ziemlich sicher, dass Sie wissen, worüber ich spreche.
JavaScript Das Client-seitige Templating hat sich in letzter Zeit wirklich durchgesetzt, vor allem weil der Fokus auf dem Erstellen von Desktop-ähnlichen Erlebnissen liegt. Dies bedeutet, dass ein Großteil der Verarbeitung auf der Clientseite ausgeführt wird, wobei die Daten hauptsächlich über serverseitige API-Anforderungen abgerufen werden.
Ich erinnere mich, dass ich vor einiger Zeit über clientseitige Vorlagen geschrieben habe, als das jQuery Template-Plugin zum ersten Mal veröffentlicht wurde. Fast drei Jahre später ist es immer noch der meistgelesene Beitrag in meinem Blog, der zeigt, wie das Interesse an Templates auf Kundenseite gestiegen ist. Seitdem wurden eine Reihe weiterer Frameworks veröffentlicht, die umfangreiche Funktionen und unterstützende Communities bieten. Lenker sind eine der beliebtesten Optionen und der Rahmen, den das Ember-Projekt gewählt hat, um seine Anforderungen an die Vorlage zu erfüllen. Dies ist sinnvoll, da die Handlerbars von Ember.js Mitbegründer und Kernteammitglied Yehuda Katz gegründet wurde. Beachten Sie jedoch, dass ich nicht vorhabe, Vergleiche zwischen Templating-Frameworks anzustellen, und ich werde mich streng auf Händelbars konzentrieren, da dies Ember.js standardmäßig verwendet.
In den vorherigen Artikeln habe ich einige sehr grundlegende Vorlagen im Code gezeigt:
Auffallend sind die Typdeklaration für das Skript-Tag und die geschweiften Klammern, die als Begrenzer für die Ausdrücke dienen, auf die Handlebars wirkt. Dies ist eine sehr typische Syntax, auf die ich in Kürze ausführlicher eingehen werde, und Sie werden beim Erstellen von Ember-Vorlagen konsistent verwenden.
Trotz der Tatsache, dass Handlebars eine spezielle Syntax verwendet, arbeiten Sie am Ende des Tages vor allem mit Standard-HTML-Markup. Lenker dienen zum Einfügen von Inhalten in dieses Markup, um dem Benutzer Daten anzuzeigen. Dazu werden die abgegrenzten Ausdrücke analysiert und durch die Daten ersetzt, für die Sie die Handlebars-Komponente verwendet haben. Im Falle von Ember stellt Handlebars die Haken bereit und Ember verwendet sie. Diese Daten stammen in der Regel von Ihrem Controller (Denken Sie daran, dass Controller als Schnittstelle zu Ihren Modellen dienen)..
Das erste, was eine Vorlage benötigt, ist eine Skript-Tag-Definition. Die meisten von Ihnen haben wahrscheinlich Skript-Tags definiert, um Ihre JavaScript-Bibliothek zu laden. Sie haben dies bereits getan, um Handlebars in Ihr Ember-Projekt zu laden:
Es gibt einen kleinen Unterschied, wenn Sie eine Vorlage definieren. Zuerst spezifizieren wir a Art Attribut "Text / X-Lenker". Diese Art wird vom Browser ignoriert, der Text bleibt jedoch zur Einsichtnahme verfügbar und Ember kann Vorlagen in der App identifizieren. Darüber hinaus verwendet Ember ein Datenattribut namens "Datenvorlagenname", mit dem Ember bestimmte Teile Ihrer Anwendung einer Vorlage zuordnen kann. Die folgende Deklaration definiert beispielsweise eine Vorlage mit dem Namen "Mitarbeiter":
Wenn Ihre Anwendung gestartet wird, durchsucht Ember das DOM nach type = "text / x-Lenker, kompiliert die gefundenen Vorlagen und speichert sie in einer Eigenschaft des aufgerufenen Ember-Objekts Glut.TEMPLATES die er verwendet, um herauszufinden, was für eine bestimmte Route gerendert werden soll. Deshalb ist die Einhaltung der Namenskonventionen von Ember so wichtig. Im obigen Beispiel wird diese Vorlage automatisch der Mitarbeiterroute und dem Controller zugeordnet, den Sie in Ihrer Anwendung erstellt haben. Ich kann auch hier nicht genug betonen, wie diese Namenskonventionen Ihre Entwicklung wesentlich erleichtern werden.
Ember ist auf URLs angewiesen, um zu bestimmen, welche Ressourcen verwendet werden müssen und welche Vorlagen gerendert werden müssen. Stellen Sie sich vor, Sie hätten eine Profilseite mit der URL "/ profile". Sie hätten eine Ressource, genannt Profil Dadurch würden bestimmte Ressourcen für diese URL geladen (wie ein Routenobjekt), und Sie hätten auch eine Vorlage mit demselben Namen. Wir haben die Definition von Ressourcen und Routenobjekten in Teil 2 meiner Ember-Serie besprochen. Wenn Sie sich also nicht sicher sind, worüber ich spreche, sollten Sie unbedingt wieder dort hüpfen, um sich zu erfrischen.
Wenn Sie diese URL besuchen, weiß Ember, dass diese Ressourcen geladen und die von Ihnen definierte Vorlage analysiert werden müssen. Er tut dies über seine Namenskonventionen und weiß, dass er die in der Datei definierten Ressourcen laden muss, weil Sie zu "/ profile" gegangen sind Profil, und rendern Sie die Vorlage mit dem Namen data-template-name = "Profil".
Wenn Sie die Namenskonventionen noch einmal durchgehen, werden Sie feststellen, dass die Route, der Controller und die Vorlage alle mit demselben URL-Namen verknüpft sind, mit der Ausnahme, dass die Vorlage in Kleinbuchstaben geschrieben ist. Auf diese Weise kann Ember alles hinter den Kulissen erledigen, ohne dass Sie viel Verkabelung vornehmen müssen.
Beachten Sie auch, dass Sie eine Vorlage ohne ein Datenvorlagenname In diesem Attribut geht Ember davon aus, dass es sich um die Vorlage mit Anwendungsbereich handelt - die Vorlage, die normalerweise als Site-Wide-Vorlage zum Erstellen von Benutzeroberflächenelementen wie Kopf- und Fußzeilen und Navigation verwendet wird. Wenn Sie nicht explizit eine Vorlage für eine Anwendung oder sogar eine Ressource definieren (z. B. für eine URL), übernimmt Ember dies automatisch für Sie, um Stabilität und Konsistenz in Ihrer App sicherzustellen.
Der nächste Schritt besteht darin, Ihr Markup und die begrenzten Ausdrücke, die Sie zur Darstellung Ihrer Daten verwenden, anzugeben. Ausdrücke werden durch doppelte geschweifte Klammern begrenzt, sodass sie leicht erkannt und analysiert werden können, wenn Daten von Ihrem Controller übertragen werden. Hier ist ein Beispiel:
In diesem Fall ist die Vorname und Nachname Ausdrücke werden von Ember analysiert und durch tatsächliche Daten ersetzt. Darüber hinaus richtet Ember Beobachter so ein, dass Ihre Vorlage automatisch aktualisiert wird, wenn sich Ihre Daten ändern, und die Aktualisierungen werden dem Benutzer Ihrer App angezeigt.
Bisher habe ich Ihnen ein sehr einfaches Beispiel gezeigt, aber das ist zum Mitnehmen:
Dies bietet viel Flexibilität bei der Strukturierung Ihrer Benutzeroberfläche. Sehen wir uns weiter die verfügbaren Funktionen an.
Denken Sie daran, dass Ember Handlebars nutzt, sodass Sie hier auf die volle Breite der Ausdrucksweisen zugreifen können. Bedingte Ausdrücke sind ein Muss, um fast alles nützlich zu machen. Lenker bietet eine Reihe von Optionen.
Nehmen wir an, ich hatte ein JSON-Dataset, das folgendermaßen aussah:
"items": ["title": "Abreißbare Stoffsimulation in JavaScript", "url": "http://codepen.io/stuffit/pen/KrAwx", "id": 5592679, "commentCount": 20, "Punkte": 127, "postedAgo": "Vor 1 Stunde", "postedBy": "NathanKP", "title": "Netflix jetzt größer als HBO", "url": "http://qz.com / 77067 / netflix-now-larger-than-hbo / "," id ": 5592403," commentCount ": 68," punkte ": 96," postedAgo ":" Vor 2 Stunden "," postedBy ":" edouard1234567 "
Wenn ich das sicherstellen wollte Titel Wenn Daten verfügbar sind, kann ich eine bedingte "if" - Anweisung hinzufügen, indem Sie die #ob Ausdruck:
#if item.title
Dies prüft, ob item.title ist nicht undefiniert und verarbeitet die nachfolgenden Ausdrücke für die Titel, postedAgo und Geschrieben von Datenausdrücke.
Da dieses Dataset mehr als einen "Datensatz" enthält, können Sie davon ausgehen, dass wir wahrscheinlich jedes Element von überlaufen möchten Artikel. Dort ist das #jeder Ausdruck kommt ins Spiel. Damit können Sie eine Liste von Objekten auflisten. Denken Sie daran, dass Vorlagen eine Kombination aus Markup- und Handlebars-Ausdrücken sind #jeder Ausdruck zum Durchlaufen aller Elemente, die in unserem Ember-Modellobjekt verfügbar sind. Denken Sie daran, dass das Ember-Modell von dem Controller abgeleitet wird, der mit der Vorlage über die Namenskonventionen von Ember verbunden ist.
Dies würde etwas ähneln wie:
Der entscheidende Vorteil ist die implizite Beobachtung von Ember, die Ihre Daten bei einem Update aktualisiert.
Wenn Ihr Bedingungsausdruck komplexer sein muss, müssen Sie eine berechnete Eigenschaft erstellen. Auf diese Weise können Sie eine Eigenschaft erstellen, die auf einer Methode basiert, die komplexe Codebedingungen auf Ihre Daten anwenden kann. Angenommen, ich wollte nur Daten anzeigen lassen, die den Titel "Tearable Cloth Simulation in JavaScript" hatten. Es gibt ein paar Dinge, die ich einrichten muss:
Accentsconagua
App.TitleController = Ember.ObjectController.extend (titleMatch: function () return this.get ('title') === "Tearable Cloth Simulation in JavaScript"; .property ()); Wenn wir den Code betrachten, werden wir subclassing Ember.ObjectController den Controller erstellen. Dies ist der Controller, der jedes Element in unserer Vorlage umschlingt. Als Nächstes erstellen wir eine Methode, genannt titleMatch die verwendet die erhalten() Methode, um den aktuellen Titel zurückzuziehen, mit dem von mir definierten Text zu vergleichen und einen booleschen Wert zurückzugeben. Zum Schluss die Glut Eigentum() Methode wird aufgerufen, um das zu definieren titleMatch Methode als berechnete Eigenschaft.
Sobald wir dies eingerichtet haben, aktualisieren wir die Vorlage #jeder Ausdruck, um jedes Element mit dem von uns erstellten neuen Controller darzustellen. Dies geschieht mit der itemController Richtlinie. Eine wichtige Sache zu verstehen ist das itemController ist ein Schlüsselwort in Ember, das einen Controller mit Elementen einer Vorlage verknüpft. Verwechseln Sie es nicht mit einem tatsächlichen Controller-Namen (wie ich es anfangs getan habe). Der Controller-Name wird zugewiesen itemController, so was:
Benennungskonventionen schreiben wiederum vor, dass wir bei der Zuweisung von Namen in Vorlagen Kleinbuchstaben verwenden. In diesem Fall vergeben wir TitleController zu itemController.
Wenn nun jedes Element überlaufen wird, die berechnete Eigenschaft, titleMatch, wird verwendet, um den Titel auszuwerten und Daten anzuzeigen, wenn sie übereinstimmen.
Beim Erstellen dynamischer Vorlagen wird nicht nur Text ausgespuckt. Es kann vorkommen, dass das Erscheinungsbild der Benutzeroberfläche durch die Verarbeitung von Daten beeinflusst werden muss. Das Anzeigen eines Bildes oder das Erstellen eines Links sind großartige Beispiele dafür.
Das Binden von Daten an ein Element erfordert die Verwendung spezieller Ember-Helfer, die die Definition des Kontextes eines Attributs unterstützen und sicherstellen, dass die Attribute bei Datenänderungen ordnungsgemäß aktualisiert werden. Für Elementattribute die bindAttr helper wird verwendet, um die Werte für ein Attribut einzugeben. Wenn wir die URL eines Bildes dynamisch angeben müssen, verwenden wir die folgende Syntax:
Dasselbe gilt für Attribute, die keinen Wert erhalten, wie z deaktiviert:
In diesem Fall, isAdminstrator Dies kann eine berechnete Eigenschaft sein, die auf einer Methode im Controller basiert, oder nur eine normale Objekteigenschaft, die Ihnen eine große Flexibilität beim Definieren der Bedingungen für das Deaktivieren des Kontrollkästchens bietet. Diese Flexibilität wird auch auf die Definition von Klassennamen übertragen. Wenn ich eine Bedingungsanweisung verwenden wollte, um zu definieren, ob eine Klasse auf mein Element angewendet werden soll, kann ich den folgenden Code verwenden:
Warnung!
Abhängig vom booleschen Status wäre mein Markup entweder:
Warnung!
Für ein wahr Bedingung oder:
Warnung!
Für ein falsch Bedingung. Beachten Sie das, wenn ich angegeben habe dringlich Für die Klasse hat Ember den Namen demherisiert und die Klasse als gerendert dringlich. Wenn Sie es vorziehen, Ihre eigene Klasse basierend auf den Ergebnissen anzugeben, können Sie einen Bedingungsausdruck verwenden, der einer ternären Anweisung ähnelt:
Das wird wiederkommen
dringendodernormalfür die Klasse, basierend auf dem Bedingungswert vondringlich.
Lernen Sie Vorlagen kennen
Vorlagen bilden die Grundlage für Ihre Benutzeroberfläche. Daher ist es wichtig, dass Sie die Dokumente auf der Ember- und Handlebars-Site lesen, um ein Gefühl für die allgemeine Leistungsfähigkeit zu erhalten. Selbst wenn Sie Ember nicht verwenden, ist Handlebars ein großartiger Rahmen für den täglichen Gebrauch und lohnt die Investition in den Umgang mit Ember.
Gabriel Manricks hat hier auf Nettuts + ein großartiges Tutorial über Handlebars geschrieben, mit dem Sie sich mit dem Framework vertraut machen können.
