Une vue est un composant : un nœud de l'arbre d'interface avec sa propre mise en page, son comportement et ses styles. Ce chapitre explique comment les vues sont déclarées, reliées à la logique, composées et réutilisées.Vous découvrez view.tree : De TypeScript à view.tree construit un même composant deux fois, une fois en classe écrite à la main et une fois en arbre, et montre le code vers lequel l'arbre compile. Lisez-la d'abord si la syntaxe ci-dessous ressemble à un nouveau langage plutôt qu'à un raccourci.
Un composant $my_card vit dans my/card/ et est décrit par un maximum de trois fichiers, chacun avec un rôle clair :card.view.tree — ce qu'est le composant : sa structure et ses liaisons par défaut.card.view.ts — comment il se comporte : méthodes TypeScript, état réactif.card.view.css.ts — à quoi il ressemble : styles typés vérifiés par le compilateur.Séparer structure, comportement et style est délibéré — chaque fichier reste petit et lisible, et la mise en page n'est jamais mêlée à la logique.Aucun des trois n'est obligatoire à lui seul. Retirez card.view.tree et écrivez la classe directement dans namespace $ : la structure devient des méthodes ordinaires et le composant fonctionne toujours. La suite de ce chapitre utilise l'arbre, parce que c'est à cela que ressemble la structure une fois la plomberie générée pour vous.
view.tree décrit la structure de façon déclarative. L'indentation, c'est l'imbrication ; il n'y a pas de balises fermantes.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Chaque nom capitalisé (Title, Body) devient une vraie propriété que vous pouvez atteindre, redéfinir ou styliser. Chaque liaison en minuscules (title, text) devient une valeur que vous pouvez calculer dans .view.ts.
Deux opérateurs relient une propriété à sa source :<=unidirectionnel : l'enfant lit une valeur depuis le propriétaire.<=>bidirectionnel : la valeur circule dans les deux sens — utilisé pour les champs de saisie.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Ici, le value du champ et le text du propriétaire restent synchronisés automatiquement : saisissez dans le champ et text se met à jour ; définissez text dans le code et le champ le reflète.
