Wie funktionieren Turbo Streams (hinter den Kulissen)

Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht

---

Mit Turbo Streams können Sie bestimmte Teile Ihrer App auf eine Webanfrage hin (Controller-Aktion) aktualisieren, die einfach als Turbo Streams bezeichnet wird. Oder als Turbo Stream Broadcasts, wenn es von Ihrem Back-End (beim Erstellen, Aktualisieren oder Zerstören des Modells oder manuell von einem beliebigen Objekt aus) über Websockets ausgelöst wird, normalerweise über ActionCable.

Während die Quelle unterschiedlich ist, ist die Antwort (HTML) für beide gleich. Ich möchte kurz erklären, wie Turbo Streams funktionieren, damit Sie verstehen, dass es, genau wie bei Rails, keine Magie gibt ??. Einfach nur altes JavaScript!

Um einen Turbo-Stream zu übertragen, gehen Sie folgendermaßen vor:

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Und für Controller-Aktionen (oder Inline im Controller, falls das Ihr Problem ist):

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Was ist also die Antwort (HTML), die für beide Optionen gesendet wurde?

<turbo-stream action="append" target="resources">
  <template>
    <!-- HTML content of the Resource -->
  </template>
</turbo-stream>

Das sieht der Turbo Stream-Antwort, die Sie für Controller-Aktionen erstellen, sehr ähnlich! Der einzige große Unterschied ist das template-Element, das um den HTML-Code gewickelt ist (von einer Partial- oder ViewComponent-Komponente). Das template-Element ist ein Container zum Speichern von HTML-Inhalten, die ausgeblendet sind.

? Antworten wie diese können Sie in den Devtools Ihres Browsers sehen.

Sobald das Turbo-Stream-Element in das DOM injiziert wird, übernimmt Turbo. Turbo-Stream ist nichts anderes als ein benutzerdefiniertes Element. Es wird hier definiert. Sie können sehen, dass es wiederum eine connectedCallback()-Funktion definiert. Diese Funktion wird jedes Mal aufgerufen, wenn das Element zum Dokument hinzugefügt wird. Dies ist eine Funktion benutzerdefinierter Elemente.

Was passiert als nächstes? Gehen wir die wichtigsten Teile Schritt für Schritt durch. Machen Sie sich bereit! ?️?

1. ein benutzerdefiniertes Ereignis, beforeRenderEvent, wird ausgelöst;
2. Dieses Ereignis ruft die renderElement-Funktion auf;
3. dann wird performAction aufgerufen;
4. Die definierte Aktion wird dann aufgerufen.

In dieser letzten Datei können Sie alle unterstützten Standardaktionen für Turbo Stream sehen (Anhängen, Voranstellen, Ersetzen usw.). Wenn Sie mit JavaScript zumindest ein wenig vertraut sind, sollten Sie leicht verstehen, was jede einzelne Aktion bewirkt (falls nicht, schauen Sie sich JavaScript für Rails-Entwickler an?). Im Wesentlichen, mit Ausnahme der Aktion Entfernen; Holen Sie sich den HTML-Code aus dem template-Element und fügen Sie ihn dem DOM hinzu (basierend auf der Aktion; anhängen, voranstellen, danach usw.).

Mit diesem Wissen werden Sie vielleicht feststellen, dass Sie dieses benutzerdefinierte Turbo-Stream-Element einfach manuell einfügen können und Turbo weiß, dass er es aufnehmen muss.

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Kopieren Sie einfach den obigen HTML-Code und zeigen Sie ihn im Browser an. Sie werden sehen, wie das li-Element an das ul-Element angehängt wird. ? Fügen Sie dann mit den Entwicklungstools Ihres Browsers ein weiteres Turbo-Stream-Element irgendwo im DOM ein:

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Ziemlich cool, oder? Turbo nutzt viele Funktionen des Browsers, um das reibungslose Entwicklererlebnis zu bieten, das wir alle lieben. Jetzt wissen Sie, wie Turbo Stream hinter den Kulissen funktioniert!

Das obige ist der detaillierte Inhalt vonWie funktionieren Turbo Streams (hinter den Kulissen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!