Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Syntax und Code

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Ordnungsgemäßes Implementieren von Aktionshandlern von Steuerfeldern und Hilfsfunktionen und Aufrufen von Hilfsfunktionen im Steuerfeldcode
  • Erläutern des Unterschieds zwischen gebundenen und ungebundenen Ausdrücken
  • Erklären, inwiefern globale Variablen von Visualforce und globale Wertanbieter von Aura-Komponenten unterschiedlich sind
  • Besondere Herausforderung: Erläutern des Unterschieds zwischen "c.", "c:" und "c.". (Nein, das ist kein Tippfehler.)

Syntax von Steuerfeldern

Im Modul Aura-Komponenten – Kernkonzepte wurde dieses Thema konzeptuell behandelt. Dennoch wollen wir hier einige Syntaxdetails bei clientseitigen JavaScript-Steuerfeldern wiederholen. Dies ist ein Beispiel eines Steuerfelds.
({
    myAction : function(component, event, helper) {
        // add code for the action
    },

    anotherAction : function(component, event, helper) {
        // more code
    },
})
Hier möchten wir, dass Sie drei spezifische Aspekte der Syntax verstehen. Alle unterscheiden sich davon, was Sie bei Apex-Steuerfeldern gewohnt sind.
  1. Rutsche!Dies ist keine Klasse. Es handelt sich um ein JSON-Objekt mit einer Zuordnung von Name-Wert-Paaren. Es kann nur Aktionshandler enthalten, die Sie nie direkt aufrufen.
  2. Ihre Aktionshandler werden als anonyme Funktionen deklariert, die dem Aktionsnamen zugeordnet werden (hier myAction und anotherAction). Ihre Funktionen können bis zu drei Parameter und nur diese Parameter akzeptieren (Komponente, Ereignis und Hilfsfunktion, wenngleich Sie sie unterschiedlich benennen können). Das Framework stellt sie bereit, wenn es den Handler aufruft.
  3. Am allerwichtigsten ist aber, dass Sie Ihre Name-Wert-Paare mit einem Komma trennen, was in dieser grafischen Version desselben Codes hervorgehoben ist. Tipp: Fügen Sie nach jedem Aktionshandler ein Komma hinzu Eine Eigenart von JavaScript-Syntax ist, dass das erste Komma in diesem Beispiel obligatorisch ist, während das zweite (das wie ein nachhängender Fehler aussieht), zwar zulässig, aber optional ist.

    Leiter! Es wird empfohlen, hinter Ihrem letzten Aktionshandler stets das optionale Komma hinzuzufügen, auch wenn es nicht notwendig ist und wie das Zucken bei einer Zwangsneurose erscheinen mag. Der Grund ist, dass Sie zu einem späteren Zeitpunkt wahrscheinlich einen weiteren Aktionshandler hinzufügen werden und dann das Komma vergessen. (Ihrem bescheidenen Autor ist das zu oft passiert, als dass er es öffentlich zugeben würde.) Dann erhalten Sie einen kryptischen Fehler, den Sie dann zeitraubend untersuchen müssen. Diese Zeitverschwendung können Sie sich also einfach ersparen.

Syntax von Hilfsfunktionen

Fügen Sie Funktionen, die Sie wiederverwenden möchten, in die Hilfsfunktion der Komponente ein. Hilfsfunktionen ermöglichen auch eine Spezialisierung von Aufgaben, z. B. Verarbeitung von Daten und Auslösung von serverseitigen Aktionen. Rufen Sie Hilfsfunktionen auf, indem Sie darauf über den Parameter helper verweisen, der an Ihre Aktionsfunktion übergeben wird.
myAction : function(component, event, helper) {
    helper.aHelperFunction(component, 42);
},
Hilfsfunktionen von Komponenten werden mit einer ähnlichen Syntax wie Steuerfelder deklariert, und zwar als Objekt, das eine Zuordnung von Name-Wert-Paaren enthält. (Und, wie schon geahnt, werden diese wie beim Steuerfeld durch Kommas getrennt.)
({
    aHelperFunction : function(component, value) {
        // helper code here
    },
})
Dennoch sollten Sie sich einiger Unterschiede bewusst sein.
  • Hilfsfunktionen können so deklariert werden, dass sie die von Ihnen gewünschten Parameter verwenden. Sie rufen die Hilfsfunktionen auf, nicht das Framework.
  • Übergeben Sie vereinbarungsgemäß einen Verweis an die Komponente, die die Hilfsfunktion aufruft, als ersten Parameter an die Hilfsfunktion.
  • Hilfsfunktionen sind Singleton-Objekte, die von allen Komponenteninstanzen gemeinsam genutzt werden. Speichern Sie den Komponentenstatus nicht in der Hilfsfunktion. Stellen Sie sich Hilfsfunktionen eher wie statische Methoden in Ihren Apex-Steuerfeldern vor.
  • Sie können einer Hilfsfunktion Nichtfunktionen hinzufügen und verfügen über die Werte, die den Aktionshandlern Ihres Steuerfelds zur Verfügung stehen, z. B. API-Anmeldeinformationen, die Sie nur einmal laden möchten. Doch beachten Sie, dass es sich um eine gemeinsam genutzte Variable handelt, bei der es keinen Schutz vor einem unsachgerechten Zugriff gibt. Prüfen Sie deshalb die Befolgung dieser Strategie sehr eingehend.

Steuerfelder im Vergleich mit Hilfsfunktionen

Was fügen Sie also der Aktionshandlerfunktion eines Steuerfelds und was einer Hilfsfunktion hinzu?

Viele Entwickler befolgen die bewährte Vorgehensweise, Aktionshandler so einfach und klar wie möglich zu halten und die Details in die Hilfsfunktion zu abstrahieren. Dieser Ansatz ist vernünftig, doch es gibt noch andere.

Unser Rat ist, Code, den Sie wiederverwenden möchten, auf Aktionshandler in der Hilfsfunktion zu verteilen. Darüber hinaus ist dies eine Frage des Geschmacks und Stils sowie der Programmierungsstandards Ihrer Organisation.

Ausdrücke

Die Syntax von Ausdrücken im Markup von Visualforce- und Aura-Komponenten ist ähnlich. Hier ein Beispiel:

The message: {! messageText }

Ist dies das Markup von Visualforce- oder Aura-Komponenten? Es ist Visualforce. Dasselbe Markup löst einen Fehler aus, wenn Sie es in einer Aura-Komponente verwenden.*

Woran erkennen Sie den Unterschied? Der Ausdruck verweist auf messageText. Hierbei handelt es sich vermutlich um eine Eigenschaft oder Getter-Methode im Steuerfeld der Seite oder eine Steuerfelderweiterung. Der Wert stammt "von irgendwo", aber es gibt verschiedene Möglichkeiten. Bei Visualforce ist das nicht wirklich erkennbar.

Aura-Komponenten lassen das Abrufen eines Werts "von irgendwo" nicht zu. Hier ist die wahrscheinlichste Entsprechung eines Markups von Aura-Komponenten.

The message: {! v.messageText }

Der Hauptunterschied, das v., ist geringfügig, wenn Sie Aura-Komponenten erstmals kennenlernen. Dies ist der Wertanbieter für die view, bei der es sich um die Komponente selbst handelt. Auf diese Weise verweisen Sie auf die Attribute einer Komponente. Wertanbietern widmen wir uns im nächsten Abschnitt. Im Augenblick reicht es zu wissen, dass, wenn Sie den Wertanbieter weglassen, eine Fehlermeldung angezeigt wird.

Rutsche! Daran sollten Sie insbesondere denken, wenn Sie Visualforce-Markup in Aura-Komponenten umwandeln. Das Markup sieht ähnlich aus und kann ganz einfach kopiert und an der gewünschten Stelle eingefügt werden. Vergessen Sie nicht, jedem Ausdruck den Wertanbieter hinzuzufügen.

Es gibt zwei weitere Aspekte, die bei Ausdrücken für Aura-Komponenten und deren Syntax beachtet werden müssen. Erstens gibt es in Aura-Komponenten tatsächlich zwei Arten von Ausdrücken: gebundene und ungebundene, die verschiedene Ausdruckstrennzeichen verwenden.

  • Gebundener Ausdruck: {! v.messageText }
  • Ungebundener Ausdruck: {# v.messageText }

Der Unterschied bei der Syntax ist ein Zeichen: das Ausrufezeichen bzw. das Rautenzeichen. Der Verhaltensunterschied ist je nach Kontext entweder unsichtbar oder umfassend. Die ungebundene Version fungiert eher wie ein Visualforce-Ausdruck. Rutsche! Die unterschiedliche Syntax bietet das ähnliche Verhalten. Intuitiv, richtig?

Gebundene Ausdrücke fügen das Verhalten von Aura-Komponenten hinzu, wodurch eine bidirektionale Bindung zwischen allen Verwendungen des Werts erstellt wird. Wenn Sie den Wert an einer Stelle ändern, wird er überall geändert. Weitere Informationen finden Sie unter Data Binding Between Components.

Zweitens gibt es im folgenden Beispiel zwei Ausdrücke.
<aura:component ...>
    ...

    The message: {!v.message}

    <lightning:button label="Acknowledge"
        onclick="{!c.acknowledgeMessage}"/>

    ...
</aura:component>

Der offensichtlichste Unterschied ist der Wertanbieter, v. bzw. c.. v. steht für "View", wie zuvor erläutert. c. steht für "Controller", das Steuerfeld. Sie verwenden c., um auf Aktionen im Steuerfeld zu verweisen. Hier binden wir eine Aktion an das Klickereignis der Schaltfläche.

Wenngleich Sie ein Komponentenattribut direkt verwenden können, was wir hier mit dem Zeichenfolgenattribut {!v.message} tun, verweisen Sie im Steuerfeld auf Funktionen. Das bedeutet, dass Sie diese Funktionen nicht direkt aufrufen können. Das Ergebnis der Auswertung des Ausdrucks {!c.acknowledgeMessage} ist ein Verweis auf eine Funktion und nicht auf einen Ergebniswert, den Sie direkt verwenden können. Dies wird durch Hinzufügen des Wertanbieters nicht geändert.

____________________

* Es gibt eine Ausnahme, wenn messageText eine lokale <aura:iteration>-Variable ist, doch lassen Sie uns hier die Dinge einfach halten.

Wertanbieter

Was bleibt nach diesem letzten Abschnitt noch über Wertanbieter zu sagen? Viel. Doch vorher noch ein Hinweis auf eine mögliche Ursache für Verwechslungen. Eine weitere Rutsche.

Einige wichtige Funktionen von Aura-Komponenten werden mithilfe von Wertanbietern implementiert. In den vorherigen Beispielausdrücken haben wir mehrmals v. und c. verwendet. Dies sind die Wertanbieter zum automatischen Verknüpfen des Markups, der Attribute und Steuerfelder von Komponenten. Außer im Markup können Sie sie auch im Steuerfeldcode verwenden. Es folgen einige Zeilen eines Aktionshandlers, der die Werteanbieter v. und c. nutzt.
({
    "echo" : function(cmp) {
        // ...
        var action = cmp.get("c.serverEcho");
        action.setParams({ echoString : cmp.get("v.message") });

        // ...
    }
})

Es gibt zwei Dinge zu beachten. Erstens die Methode für den Zugriff auf den Wertanbieter. Sie müssen get() mit dem Namen des Attributs, auf das Sie zugreifen möchten, und dem Wertanbieter aufrufen. Also cmp.get("v.message").

Rutsche! Zweitens die Rutsche. Werfen wir nochmals einen Blick auf die erste Zeile der Funktion. Was wird mit cmp.get("c.serverEcho") abgerufen? Ein Verweis auf die serverseitige Aktion. Im Markup einer Komponente stellt c. das clientseitige Steuerfeld dar. Im JavaScript (Aktionshandler oder Hilfsfunktion) derselben Komponente stellt c. das serverseitige Steuerfeld dar.

Verwirrt? Es wird noch schlimmer. Rutsche! c: ist auch sowohl im Markup als auch im JavaScript zu finden. Das heißt "c-Doppelpunkt" anstelle von "C-Punkt". c: ist der Standard-Namespace. Es stellt den Aura-Komponentencode dar, den Sie Ihrer Organisation hinzugefügt haben.

Wir sehen ein, dass es hier eine Verwechslungsgefahr gibt, weshalb wir hier darauf hinweisen. Behalten Sie "c" in allen seinen Formen im Auge: c., c. und c:.

Globale Wertanbieter

Es gibt eine Art von Wertanbieter für Aura-Komponenten, nämlich globale Wertanbieter, die wie globale Variablen von Visualforce aussehen. Beispielsweise weisen sowohl Visualforce- als auch Aura-Komponenten $Label und $Resource auf. Hier gibt es zwei mögliche Rutschen.

  • Rutsche! Nicht jede in Visualforce verfügbare globale Variable ist als globaler Wertanbieter in Aura-Komponenten verfügbar.
  • Rutsche! Einige globale Variablen und globalen Wertanbieter haben denselben Namen. Aber trotzdem verhalten sie sich anders. (Wenn Sie sich keine Gründe dafür vorstellen können, sehen Sie sich zur Auffrischung noch einmal Aura-Komponenten – Kernkonzepte an. Und zwar ehe Sie das Quiz absolvieren. Also aufgepasst!)

Versuchen Sie erst, einen globalen Wertanbieter zu verwenden, nachdem Sie die dazugehörige Dokumentation im Entwicklerhandbuch zu Lightning Aura-Komponenten gelesen haben.