Вид — це компонент: вузол у дереві інтерфейсу з власною розміткою, поведінкою та стилями. Цей розділ описує, як види оголошуються, зв'язуються з логікою, компонуються та повторно використовуються.Якщо view.tree для вас новина: Від TypeScript до view.tree збирає один компонент двічі — рукописним класом і деревом — і показує код, у який дерево компілюється. Прочитайте спершу її, якщо синтаксис нижче виглядає новою мовою, а не скороченням.
Компонент $my_card живе в my/card/ й описується щонайбільше трьома файлами, кожен із чіткою роллю:card.view.tree — чим є компонент: його структура та типові прив'язки.card.view.ts — як він поводиться: методи TypeScript, реактивний стан.card.view.css.ts — як він виглядає: типізовані стилі, які перевіряє компілятор.Тримати структуру, поведінку та стиль окремо — це навмисно: кожен файл лишається малим і читабельним, а розмітка ніколи не переплітається з логікою.Обов'язкового серед трьох немає жодного. Приберіть card.view.tree і напишіть клас просто в namespace $: структура стане звичайними методами, а компонент працюватиме далі. Далі в розділі використано дерево, бо саме так виглядає структура, коли обв'язку генерують за вас.
view.tree описує структуру декларативно. Відступ — це вкладення; закривальних тегів немає.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Кожне ім'я з великої літери (Title, Body) стає справжньою властивістю, до якої можна звернутися, яку можна перевизначити чи стилізувати. Кожна прив'язка з малої літери (title, text) стає значенням, яке можна обчислити в .view.ts.
Два оператори з'єднують властивість із її джерелом:<=односторонньо: дочірній елемент читає значення від власника.<=>двосторонньо: значення тече в обидва боки — використовується для полів вводу.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Тут value поля вводу та text власника автоматично лишаються синхронізованими: набираєте в полі — text оновлюється; задаєте text у коді — поле це відображає.
