smalljs$mol検索⌘ Kドキュメントプレイグラウンド比較エコシステム概要JA
TypeScript から view.tree へGetting StartedはじめにメンタルモデルはじめかたTypeScript から view.tree へプロジェクト構成ツールEssentialsインストールビュー状態とリアクティビティルーティングレンダリングテストデプロイトラブルシューティングDataデータ取得データスキーマGiper BazaMoreショーケースReact、Vue、Svelte からクックブックAdvancedプラグインモジュールのメタデータオフラインゴーストビューAboutよくある質問チームリリースAPI$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

TypeScript から view.tree へ

はじめかたで書いたコンポーネントは、ふつうの TypeScript クラスです。コンパイルも実行もできますし、$mol のコンポーネントを記述する正式にサポートされた書き方の一つでもあります。同時にそれは、コンポーネントの仕事とは関係のない四つのことを頭の中に置いておくよう求めてきました。このページではそれを一つずつ取り上げ、それぞれを消してくれる view.tree の一行を見せます。最後にコンパイラが生成するコードを示すので、ツリーが第二のランタイムではないことを自分で確かめられます。ツリーが生むのは、あなたがすでに書いたあのクラスそのものです。比較用に、あのファイルをもう一度置いておきます。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}GitHub でこのページを編集役に立ちましたか？はいいいえ前へはじめかた次へプロジェクト構成このページの内容子は自分で作り、自分でキャッシュするデータの向きは演算子が語る双方向束縛は、キー一つで黙って読み取り専用になるローカライズ可能な文字列は、キーにするまでただの文字列コンポーネント全体コンパイラが吐くもの手書きのクラスがツールに渡せないもの分量の話どちらを書くか
Type to search the documentation.