Una vista è un componente: un nodo nell'albero dell'interfaccia con il proprio layout, comportamento e stili. Questo capitolo tratta come le viste vengono dichiarate, collegate alla logica, composte e riutilizzate.Se view.tree ti è del tutto nuovo: Da TypeScript a view.tree costruisce lo stesso componente due volte, una come classe scritta a mano e una come albero, e mostra il codice in cui l'albero compila. Leggila prima, se la sintassi qui sotto sembra una lingua nuova invece che un'abbreviazione.
Un componente $my_card vive in my/card/ ed è descritto da un massimo di tre file, ciascuno con un compito chiaro:card.view.tree — cosa è il componente: la sua struttura e i binding predefiniti.card.view.ts — come si comporta: metodi TypeScript, stato reattivo.card.view.css.ts — come appare: stili tipizzati verificati dal compilatore.Tenere separati struttura, comportamento e stile è voluto — ogni file rimane piccolo e leggibile, e il layout non si aggroviglia mai con la logica.Nessuno dei tre è obbligatorio da solo. Togli card.view.tree e scrivi la classe direttamente in namespace $: la struttura diventa metodi ordinari e il componente continua a funzionare. Il resto del capitolo usa l'albero, perché è così che appare la struttura quando l'impalcatura viene generata per te.
view.tree descrive la struttura in modo dichiarativo. L'indentazione è annidamento; non ci sono tag di chiusura.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \Ogni nome con l'iniziale maiuscola (Title, Body) diventa una proprietà reale che puoi raggiungere, sovrascrivere o stilizzare. Ogni binding in minuscolo (title, text) diventa un valore che puoi calcolare in .view.ts.
Due operatori collegano una proprietà alla sua sorgente:<=unidirezionale: il figlio legge un valore dal proprietario.<=>bidirezionale: il valore scorre in entrambe le direzioni — usato per gli input.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\Qui il value dell'input e il text del proprietario restano sincronizzati automaticamente: digita nel campo e text si aggiorna; imposta text nel codice e il campo lo riflette.
