smalljs$molCerca⌘ KDocumentazionePlaygroundConfrontoEcosistemaInformazioniIT
Per iniziareGetting StartedIntroduzioneModello mentalePer iniziareDa TypeScript a view.treeStruttura del progettoStrumentiEssentialsInstallazioneVisteStato e reattivitàRoutingRenderingTestingDeploymentRisoluzione dei problemiDataRecupero datiSchemi di datiGiper BazaMoreVetrinaDa React, Vue e SvelteRicettarioAdvancedPluginMetadati del moduloOfflineViste fantasmaAboutFAQTeamReleaseAPI$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

Per iniziare

Arrivi da React o Vue e niente ha senso? Leggi prima Modello mentale: cinque minuti su dove sono finiti computed, watch, gli hook del ciclo di vita e il caricamento dei dati.Questa pagina ti porta da una cartella vuota a un'app $mol reattiva e funzionante. Dovrebbe richiedere circa quindici minuti. Ogni frammento qui sotto è codice reale e funzionante — copialo così com'è.Il componente lo scriverai in TypeScript normale. $mol ha anche un formato più breve per descrivere i componenti, view.tree, che incontrerai nella pagina successiva. Qui non serve: un componente $mol resta una classe ordinaria in entrambi i casi.

Cosa ti serve

Node.js 18+ e git. La lista è tutta qui.Non installi una CLI globale né generi codice boilerplate che dovrai capire in seguito. Le app $mol vivono all'interno del workspace MAM, che sa già come costruirle e servirle.

1. Ottenere il workspace

MAM è lo strumento di build e il registro dei moduli di $mol. Clonalo e installalo una volta.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start avvia il server di sviluppo su http://localhost:9080/. Osserva i tuoi file e ricostruisce automaticamente — lascialo in esecuzione nel suo terminale.

2. Creare un modulo

Un'app $mol è solo una cartella. Scegli uno spazio dei nomi (il tuo, ad es. my) e un nome (hello).1mkdir -p my/helloUna regola da ricordare: i trattini bassi in un nome di componente sono separatori di cartelle. $my_hello sta in my/hello/, $my_hello_form starebbe in my/hello/form/. I nomi delle cartelle dei moduli non contengono mai un trattino basso.Ora aggiungi due file dentro my/hello/.

index.html — il punto di ingresso

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>L'attributo mol_view_root="$my_hello" monta il tuo componente al caricamento della pagina.

hello.view.ts — il componente

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}Modifica questa pagina su GitHubÈ stato utile?SìNoPrecedenteModello mentaleSuccessivoDa TypeScript a view.treeIn questa paginaCosa ti serve1. Ottenere il workspace2. Creare un moduloindex.html — il punto di ingressohello.view.ts — il componente3. Eseguirla4. Aggiungere un secondo valore reattivo5. Controllare la buildHai costruito un'app $mol
Type to search the documentation.