Pohled je komponenta: uzel ve stromu UI s vlastním rozvržením, chováním a styly. Tato kapitola popisuje, jak se pohledy deklarují, propojují s logikou, skládají a znovu používají.Přicházíte k view.tree úplně poprvé: Z TypeScriptu do view.tree staví jednu komponentu dvakrát, jednou jako ručně psanou třídu a jednou jako strom, a ukazuje kód, do kterého se strom překládá. Přečtěte si to nejdřív, pokud vám syntaxe níže připadá jako nový jazyk, a ne jako zkratka.
Komponenta $my_card žije v my/card/ a je popsána až třemi soubory, každý s jasným úkolem:card.view.tree — co komponenta je: její struktura a výchozí vazby.card.view.ts — jak se chová: metody v TypeScriptu, reaktivní stav.card.view.css.ts — jak vypadá: typované styly kontrolované překladačem.Oddělení struktury, chování a stylu je záměrné — každý soubor zůstává malý a čitelný a rozvržení se nikdy neproplétá s logikou.Povinný sám o sobě není ani jeden ze tří. Vynechte card.view.tree a napište třídu rovnou do namespace $: struktura se stane obyčejnými metodami a komponenta bude dál fungovat. Zbytek kapitoly používá strom, protože takhle struktura vypadá, když se instalatérská práce vygeneruje za vás.
view.tree popisuje strukturu deklarativně. Odsazení znamená vnoření; nejsou žádné uzavírací značky.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Každý název s velkým počátečním písmenem (Title, Body) se stává skutečnou vlastností, ke které se můžete dostat, přepsat ji nebo ostylovat. Každá vazba s malým písmenem (title, text) se stává hodnotou, kterou můžete vypočítat v .view.ts.
Dva operátory spojují vlastnost s jejím zdrojem:<=jednosměrný: potomek čte hodnotu od vlastníka.<=>obousměrný: hodnota teče oběma směry — používá se pro vstupy.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Zde zůstávají value vstupu a text vlastníka automaticky synchronizované: napište do pole a text se aktualizuje; nastavte text v kódu a pole to odrazí.
