smalljs$mol搜尋⌘ K文件遊樂場比較生態系統關於ZH_HK
食譜Getting Started介紹心智模型快速開始從 TypeScript 到 view.tree專案結構工具鏈Essentials安裝視圖狀態與響應式路由渲染測試部署疑難排解Data資料獲取資料模式Giper BazaMore展示來自 React、Vue 和 Svelte食譜Advanced外掛模組元資料離線幽靈視圖About常見問題團隊發布API$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

食譜

針對幾乎每個應用都會遇到的任務，提供簡短、可直接複製的食譜。每一條都是真實的 $mol 程式碼——改一下名字就能用。

雙向綁定的輸入框

無需接線任何處理器，就讓輸入框和衍生值保持同步：<=> 雙向綁定，任何讀取該值的計算屬性都會自動更新。1$my_greeter $mol_view2 sub /3 <= Name $mol_string4 value? <=> name?5 <= Hello $mol_view6 sub / <= greeting \1namespace $.$$ {2 export class $my_greeter extends $.$my_greeter {3 @ $mol_mem name( next?: string ) { return next ?? '' }4 5 @ $mol_mem greeting() {6 return this.name() ? `Hello, ${ this.name() }!` : 'Type your name'7 }8 }9}

可增刪的清單

把集合保存在響應式屬性裡，並在動作中以不可變方式重寫它。帶鍵的 Row* 為每個項目渲染一列——得益於 虛擬化渲染——只有可見的列才會被建立。1$my_todo $mol_view2 draft? \3 items /4 sub /5 <= Input $mol_string6 value? <=> draft?7 hint \New item8 <= Add $mol_button_major9 click? <=> add?10 sub / <= add_label \Add11 <= List $mol_list12 rows <= item_rows /13 Row* $mol_row14 sub /15 <= Label* $mol_view16 sub / <= item_title* \17 <= Delete* $mol_button_minor18 click? <=> delete*?19 sub / <= delete_label \✕1namespace $.$$ {2 export class $my_todo extends $.$my_todo {3 @ $mol_mem draft( next?: string ) { return next ?? '' }4 @ $mol_mem items( next?: readonly string[] ) { return next ?? [] }5 6 @ $mol_action add() {7 const title = this.draft().trim()8 if( !title ) return9 this.items([ ... this.items(), title ])10 this.draft( '' )11 }12 13 @ $mol_action delete( id: number ) {14 this.items( this.items().filter( ( _, i ) => i !== id ) )15 }16 17 item_title( id: number ) { return this.items()[ id ] }18 19 item_rows() {20 return this.items().map( ( _, id ) => this.Row( id ) )21 }22 }23}在 GitHub 上編輯此頁這有幫助嗎？是否上一頁來自 React、Vue 和 Svelte下一頁外掛本頁內容雙向綁定的輸入框可增刪的清單帶載入與錯誤狀態的資料擷取持久化本地狀態讀寫路由參數加入自動的淺色/深色主題下一步
Type to search the documentation.