Короткие, готовые к копированию рецепты для задач, которые встречаются почти в каждом приложении. Каждый — реальный код $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.
