Короткі, готові до копіювання рецепти для задач, що трапляються майже в кожному застосунку. Кожен — реальний код $mol: змініть імена та вставляйте до себе.
Тримайте ввід і похідне значення в синхроні без ручної обв'язки: <=> зв'язує в обидва боки, а будь-яка обчислювана властивість, що читає значення, оновлюється сама.1$my_greeter$mol_view2 sub /3<= Name $mol_string4 value?<=> name?5<= Hello $mol_view6 sub /<= greeting \1namespace $.$${2export class $my_greeterextends$.$my_greeter{3@ $mol_memname(next?:string){return next??''}45@ $mol_memgreeting(){6return 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 $.$${2export class $my_todoextends$.$my_todo{3@ $mol_memdraft(next?:string){return next??''}4@ $mol_memitems(next?:readonlystring[]){return next??[]}56@ $mol_actionadd(){7const title=this.draft().trim()8if(!title)return9this.items([...this.items(),title])10this.draft('')11}1213@ $mol_actiondelete(id:number){14this.items(this.items().filter((_,i)=>i!==id))15}1617item_title(id:number){return this.items()[id]}1819item_rows(){20return this.items().map((_,id)=>this.Row(id))21}22}23}Редагувати цю сторінку на GitHubЦе було корисно?ТакНіНазадЗ React, Vue та SvelteДаліПлагіниНа цій сторінціДвостороння прив'язка вводуСписок із додаванням і видаленнямЗавантаження даних зі станами завантаження та помилкиЗбереження локального стануЧитання та запис параметра маршрутуАвтоматична світла/темна темаДаліType to search the documentation.
