Začínáme

Přicházíte z Reactu nebo Vue a nic nedává smysl? Přečtěte si nejdřív

Myšlenkový model: pět minut o tom, kam se poděly computed, watch, hooky životního cyklu a načítání dat.Tato stránka vás provede od prázdné složky až po běžící, reaktivní aplikaci $mol. Mělo by to zabrat asi patnáct minut. Každý úryvek níže je skutečný, funkční kód — zkopírujte ho tak, jak je.Komponentu napíšete v obyčejném TypeScriptu. $mol má i kratší formát pro popis komponent, view.tree, a potkáte ho na další stránce. Tady ho není potřeba: komponenta $mol je tak jako tak obyčejná třída.

Co budete potřebovat

Node.js 18+ a git. To je celý seznam.Neinstalujete globální CLI ani negenerujete šablonový kód, kterému budete muset později porozumět. Aplikace $mol žijí uvnitř pracovního prostoru MAM, který už umí, jak je sestavit a servírovat.

1. Získejte pracovní prostor

MAM je sestavovací nástroj a registr modulů pro $mol. Naklonujte ho a jednou nainstalujte.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start spustí vývojový server na http://localhost:9080/. Sleduje vaše soubory a automaticky přestavuje — nechte ho běžet ve vlastním terminálu.

2. Vytvořte modul

Aplikace $mol je jen složka. Vyberte jmenný prostor (svůj, například my) a jméno (hello).1mkdir -p my/helloJedno pravidlo k zapamatování: podtržítka ve jménu komponenty jsou oddělovače složek. $my_hello bydlí v my/hello/, $my_hello_form by bydlel v my/hello/form/. Názvy složek modulů nikdy neobsahují podtržítko.Teď přidejte do my/hello/ dva soubory.

index.html — vstupní bod

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>Atribut mol_view_root="$my_hello" připojí vaši komponentu při načtení stránky.

hello.view.ts — komponenta

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}Upravit tuto stránku na GitHubuBylo to užitečné?AnoNePředchozíMyšlenkový model DalšíZ TypeScriptu do view.treeNa této stránceCo budete potřebovat 1. Získejte pracovní prostor 2. Vytvořte modul index.html — vstupní bod hello.view.ts — komponenta 3. Spusťte to 4. Přidejte druhou reaktivní hodnotu 5. Zkontrolujte sestavení Sestavili jste aplikaci $mol