Uma view é um componente: um nó na árvore de UI com seu próprio layout, comportamento e estilos. Este capítulo cobre como as views são declaradas, ligadas à lógica, compostas e reutilizadas.Chegando ao view.tree do zero: De TypeScript para view.tree constrói um mesmo componente duas vezes, uma como classe escrita à mão e outra como árvore, e mostra o código em que a árvore compila. Leia essa página primeiro se a sintaxe abaixo parecer uma linguagem nova em vez de uma abreviação.
Um componente $my_card vive em my/card/ e é descrito por até três arquivos, cada um com uma função clara:card.view.tree — o que o componente é: sua estrutura e ligações padrão.card.view.ts — como ele se comporta: métodos TypeScript, estado reativo.card.view.css.ts — como ele se parece: estilos tipados verificados pelo compilador.Manter estrutura, comportamento e estilo separados é proposital — cada arquivo permanece pequeno e legível, e o layout nunca se emaranha com a lógica.Nenhum dos três é obrigatório por si só. Tire o card.view.tree e escreva a classe direto em namespace $: a estrutura vira métodos comuns e o componente continua funcionando. O resto do capítulo usa a árvore, porque é assim que a estrutura fica quando o encanamento é gerado para você.
view.tree descreve a estrutura de forma declarativa. A indentação é o aninhamento; não há tags de fechamento.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Todo nome capitalizado (Title, Body) torna-se uma propriedade real que você pode acessar, sobrescrever ou estilizar. Toda ligação em minúsculas (title, text) torna-se um valor que você pode calcular em .view.ts.
Dois operadores conectam uma propriedade à sua fonte:<=unidirecional: o filho lê um valor do proprietário.<=>bidirecional: o valor flui em ambas as direções — usado para entradas.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Aqui o value da entrada e o text do proprietário permanecem sincronizados automaticamente: digite no campo e text se atualiza; defina text no código e o campo reflete isso.
