Вью — это компонент: узел в дереве интерфейса со своей разметкой, поведением и стилями. Эта глава о том, как вью объявляются, связываются с логикой, композируются и переиспользуются.Если 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 в коде — поле это отражает.
