視圖 — $mol

視圖

視圖就是一個元件：UI 樹中的一個節點，擁有自己的版面、行為和樣式。本章介紹視圖如何宣告、如何與邏輯連接、如何組合與重用。第一次接觸 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 語言

view.tree 以宣告式描述結構。縮排即巢狀；沒有閉合標籤。1$my_card $mol_view2 sub /3 <= Title $mol_view4 sub / <= title \5 <= Body $mol_view6 sub / <= text \$my_card $mol_view —— 你的元件繼承自基底類別 $mol_view。sub / —— 子節點清單。<= Title $mol_view —— 一個具名子視圖，在 TypeScript 中可透過 this.Title() 存取。<= title \ —— 一個可繫結屬性，帶一個預設的原始字串值（\ 開始一個原始字串）。每個大寫名稱（Title、Body）都會成為一個真實屬性，你可以存取、覆寫或為它設定樣式。每個小寫繫結（title、text）都會成為一個你可以在 .view.ts 中計算的值。

繫結屬性

兩個運算子把屬性連接到它的來源：<= 單向：子節點從擁有者讀取一個值。<=> 雙向：值在兩個方向上流動——用於輸入控制項。1$my_form $mol_view2 sub /3 <= Field $mol_string4 value? <=> text? \這裡輸入控制項的 value 和擁有者的 text 會自動保持同步：在欄位中輸入，text 就更新；在程式碼中設定 text，欄位就反映出來。

連接到行為

沒有預設值的繫結在 .view.ts 中實作。類別繼承自同名的產生基底類別：1namespace $.$$ {2 export class $my_card extends $.$my_card {3 @ $mol_mem4 title() {5 return 'Untitled'6 }7 }8}在 GitHub 上編輯此頁這有幫助嗎？是否上一頁安裝下一頁狀態與響應式本頁內容三個檔案，一個元件 view.tree 語言繫結屬性連接到行為屬性與元素型別清單與帶鍵視圖條件視圖組合與重用下一步