Recettes

Des recettes courtes, prêtes à copier, pour les tâches qui reviennent dans presque toutes les applis. Chacune est du vrai code $mol — adaptez les noms et intégrez-la.

Une entrée à liaison bidirectionnelle

Gardez une entrée et une valeur dérivée synchronisées sans câbler de gestionnaire : <=> lie dans les deux sens, et toute propriété calculée qui lit la valeur se met à jour d'elle-même.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}

Une liste où ajouter et retirer

Conservez la collection dans une propriété réactive et réécrivez-la de manière immuable depuis des actions. Un Row* indexé rend une ligne par élément et — grâce au

rendu virtualisé — seules les lignes visibles sont construites.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 \✕Modifier cette page sur GitHubÉtait-ce utile ?OuiNonPrécédentDe React, Vue et Svelte SuivantPluginsSur cette pageUne entrée à liaison bidirectionnelle Une liste où ajouter et retirer Récupérer des données avec états de chargement et d'erreur Persister un état local Lire et écrire un paramètre de route Ajouter un thème clair/sombre automatique Suite