Eine View ist eine Komponente: ein Knoten im UI-Baum mit eigenem Layout, Verhalten und Styles. Dieses Kapitel behandelt, wie Views deklariert, mit Logik verdrahtet, zusammengesetzt und wiederverwendet werden.Du kommst ganz frisch zu view.tree: Von TypeScript zu view.tree baut eine Komponente zweimal, einmal als handgeschriebene Klasse und einmal als Baum, und zeigt den Code, zu dem der Baum kompiliert. Lies das zuerst, wenn die Syntax unten wie eine neue Sprache wirkt und nicht wie eine Kurzschreibweise.
Eine Komponente $my_card lebt in my/card/ und wird durch bis zu drei Dateien beschrieben, jede mit einer klaren Aufgabe:card.view.tree — was die Komponente ist: ihre Struktur und Standard-Bindungen.card.view.ts — wie sie sich verhält: TypeScript-Methoden, reaktiver Zustand.card.view.css.ts — wie sie aussieht: typisierte, vom Compiler geprüfte Styles.Struktur, Verhalten und Style getrennt zu halten ist Absicht — jede Datei bleibt klein und lesbar, und das Layout ist nie mit Logik verstrickt.Keine der drei ist für sich genommen Pflicht. Lass card.view.tree weg und schreib die Klasse direkt in namespace $: Die Struktur wird zu gewöhnlichen Methoden, und die Komponente funktioniert weiter. Der Rest dieses Kapitels benutzt den Baum, weil Struktur so aussieht, sobald die Klempnerei für dich erzeugt wird.
view.tree beschreibt Struktur deklarativ. Einrückung ist Verschachtelung; es gibt keine schließenden Tags.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Jeder großgeschriebene Name (Title, Body) wird zu einer echten Eigenschaft, die du erreichen, überschreiben oder stylen kannst. Jede kleingeschriebene Bindung (title, text) wird zu einem Wert, den du in .view.ts berechnen kannst.
Zwei Operatoren verbinden eine Eigenschaft mit ihrer Quelle:<=einweg: das Kind liest einen Wert vom Besitzer.<=>zweiweg: der Wert fließt in beide Richtungen — für Eingaben.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Hier bleiben value der Eingabe und text des Besitzers automatisch synchron: Tippe ins Feld und text aktualisiert sich; setze text im Code und das Feld spiegelt es wider.
