Widok to komponent: węzeł w drzewie interfejsu z własnym układem, zachowaniem i stylami. Ten rozdział omawia, jak widoki są deklarowane, łączone z logiką, komponowane i ponownie używane.Jeśli view.tree widzisz pierwszy raz: Z TypeScriptu do view.tree buduje jeden komponent dwa razy, raz jako ręcznie napisaną klasę i raz jako drzewo, i pokazuje kod, do którego drzewo się kompiluje. Przeczytaj to najpierw, jeśli składnia poniżej wygląda jak nowy język, a nie jak skrót.
Komponent $my_card żyje w my/card/ i jest opisany przez maksymalnie trzy pliki, każdy z jasnym zadaniem:card.view.tree — czym komponent jest: jego struktura i domyślne powiązania.card.view.ts — jak się zachowuje: metody TypeScript, stan reaktywny.card.view.css.ts — jak wygląda: typowane style sprawdzane przez kompilator.Trzymanie struktury, zachowania i stylu osobno jest zamierzone — każdy plik pozostaje mały i czytelny, a układ nigdy nie splata się z logiką.Żaden z tych trzech nie jest sam w sobie obowiązkowy. Usuń card.view.tree i napisz klasę wprost w namespace $: struktura staje się zwykłymi metodami, a komponent nadal działa. Reszta rozdziału używa drzewa, bo tak wygląda struktura, gdy hydraulika jest generowana za ciebie.
view.tree opisuje strukturę deklaratywnie. Wcięcie to zagnieżdżenie; nie ma znaczników zamykających.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Każda nazwa z wielkiej litery (Title, Body) staje się prawdziwą właściwością, do której możesz sięgnąć, którą możesz nadpisać lub ostylować. Każde powiązanie z małej litery (title, text) staje się wartością, którą możesz obliczyć w .view.ts.
Dwa operatory łączą właściwość z jej źródłem:<=jednokierunkowy: dziecko czyta wartość od właściciela.<=>dwukierunkowy: wartość płynie w obie strony — używany do pól wejściowych.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Tutaj value pola i text właściciela pozostają automatycznie zsynchronizowane: wpisz w pole, a text się zaktualizuje; ustaw text w kodzie, a pole to odzwierciedli.
