쿡북 — $mol

쿡북

거의 모든 앱에서 등장하는 작업을 위한, 짧고 바로 복사해 쓸 수 있는 레시피 모음입니다. 모두 실제 $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에서 다음플러그인이 페이지에서양방향 바인딩 입력 추가·삭제할 수 있는 목록 로딩·에러 상태와 함께 데이터 가져오기 로컬 상태 유지 라우트 매개변수 읽고 쓰기 자동 라이트/다크 테마 추가 다음