ビュー — $mol

ビュー

ビューはコンポーネントです。UI ツリー内のノードであり、独自のレイアウト、振る舞い、スタイルを持ちます。この章では、ビューをどう宣言し、ロジックへどう配線し、どう組み合わせて再利用するかを扱います。view.tree に初めて触れるなら、

TypeScript から view.tree へが同じコンポーネントを手書きのクラスとツリーの二通りで組み立て、ツリーがコンパイルされる先のコードまで見せます。以下の構文が省略記法ではなく新しい言語に見えるなら、先にそちらを読んでください。

3 つのファイル、1 つのコンポーネント

コンポーネント $my_card は my/card/ にあり、最大 3 つのファイルで記述されます。それぞれに明確な役割があります。card.view.tree — コンポーネントが何であるか。構造とデフォルトのバインディング。card.view.ts — どう振る舞うか。TypeScript のメソッド、リアクティブな状態。card.view.css.ts — どう見えるか。コンパイラが検査する型付きスタイル。構造・振る舞い・スタイルを分けるのは意図的です。各ファイルは小さく読みやすいまま保たれ、レイアウトがロジックと絡み合うことはありません。三つのうち単独で必須のものはありません。card.view.tree を省いてクラスを namespace $ に直接書けば、構造はふつうのメソッドになり、コンポーネントはそのまま動きます。この章の残りがツリーを使うのは、配管を生成してもらったときの構造がまさにその見た目だからです。

view.tree 言語

view.tree は構造を宣言的に記述します。インデントが入れ子を表し、閉じタグはありません。1$my_card $mol_view2 sub /3 <= Title $mol_view4 sub / <= title \5 <= Body $mol_view6 sub / <= text \$my_card $mol_view — あなたのコンポーネントは基底の $mol_view を継承します。sub / — 子の一覧。<= Title $mol_view — 名前付きのサブビュー。TypeScript では this.Title() としてアクセスできます。<= title \ — デフォルトの生文字列値を持つバインド可能なプロパティ（\ は生文字列の開始）。大文字で始まる名前（Title、Body）はすべて、アクセス・オーバーライド・スタイル付けが可能な実際のプロパティになります。小文字のバインディング（title、text）はすべて、.view.ts で計算できる値になります。

プロパティのバインディング

2 つの演算子がプロパティをその供給元に接続します。<= 一方向：子が所有者から値を読み取ります。<=> 双方向：値が両方向に流れます。入力に使います。1$my_form $mol_view2 sub /3 <= Field $mol_string4 value? <=> text? \ここでは入力の value と所有者の text が自動的に同期します。フィールドに入力すれば text が更新され、コードで text を設定すればフィールドに反映されます。

振る舞いへの配線

デフォルトのないバインディングは .view.ts で実装します。クラスは同名の生成された基底クラスを継承します。1namespace $.$$ {2 export class $my_card extends $.$my_card {3 @ $mol_mem4 title() {5 return 'Untitled'6 }7 }8}GitHub でこのページを編集役に立ちましたか？はいいいえ前へインストール次へ状態とリアクティビティこのページの内容3 つのファイル、1 つのコンポーネント view.tree 言語プロパティのバインディング振る舞いへの配線属性と要素の種類リストとキー付きビュー条件付きビュー合成と再利用次へ