トラブルシューティング

このページの項目はどれも同じ形をしています。ビルドは通り、監査もきれいで、コンソールは静か、それなのに画面は空っぽか、意図したものと違う。コンパイラがこれらの間違いを見つけられないのは、どれも正しいプログラムであり、たまたま別のコンポーネントを記述しているだけだからです。自分が見ているものに近い見出しを探してください。その下に原因と直し方があります。

プロパティのオーバーライドが何も起きない、エラーも出ない

view.tree の名前とクラスのメソッド名が食い違っています。多くは大文字小文字の違いです。ツリーでは exchange_form、クラスでは exchangeForm。これは二つのプロパティです。クラスのほうは決して呼ばれず、ツリーのほうはデフォルトのまま残り、誰もそれを知らせてくれません。名前はどこでも snake_case で、一文字たがわず一致していなければなりません。.view.ts を編集したら、どのオーバーライドも実在するプロパティを指しているか確かめてください。突き合わせる一覧は、ツリーの隣に生成される -view.tree/*.view.tree.d.ts です。

入力欄にプレースホルダーや無効化、type を付けたい

どれも $mol_string のプロパティです。プレースホルダーは hint、無効な状態は enabled、入力の種類は type。入力を使っているその場で設定します。1<= Password $mol_string2 hint \Password3 type \password4 enabled <= can_edit true5 value? <=> password? \他のどのコンポーネントの他のどのプロパティも、見つけ方は同じです。その .view.tree を開くこと。

ソースの読みかたが示すとおりです。attr * は、コンポーネントがまだモデル化していない本物の DOM 属性のためのもので、それ自身の落とし穴があります。最初の行が ^ でないブロックは、基底の属性辞書をまるごと置き換えてしまうので、そう書かれた $mol_button は disabled、role、tabindex を失います。継承するにはブロックを ^ で始め、そのあとに自分のキーを足してください。1attr *2 ^3 data_kind \primary

単語が一文字ずつバラバラに描画される

リストが期待される場所に文字列が渡され、その文字列が一文字ずつ展開されました。文字列は \ で始まり、リストは / で始まります。よくあるのは、リストである sub です。1sub / <= label \Hello

画面が空っぽなのに、テストは緑

オーバーライドが .view.ts から抜け落ちました。ツリーはどのプロパティにもデフォルトを与えるので、クラスが rows() を再定義しなくなっても TypeScript は満足し、リストは空のまま描画されます。モデルだけを調べるテストは、モデルが無事なので緑のままです。画面が依存しているオーバーライドには、ユーザーが見るものを読むテストを書いてください。rows()、sub()、サブビューの title()、あるいは DOM です。

テストがその両方を示します。

データがいつまでも読み込まれず、コンポーネントが読み込み状態のまま固まる

@ $mol_mem のメソッドが promise を値として返しています。fetch( uri ).then( ... )、async メソッド、あるいは $mol_wire_async( this ).load() の結果です。セルの中の promise は、誰にとっても「まだ計算中」と読めます。そして解決するとセルは再計算され、新しい promise を作り出します。ネットワークは動いているのに、ビューは結果を一度も見ません。正しい形は同期的です。セルの中で this.$.$mol_fetch.json( uri ) を呼び、パースされた値を返します。ファイバーは応答が届くまで中断し、それからセルを走らせ直すので、promise があなたのコードに現れることはありません。非同期の仕事をどこか別の場所でやらざるをえないときは、その結果を別の状態セルに置き、エフェクトにはフラグかキーを返させてください。promise を返させてはいけません。もう一つの原因は握りつぶされたエラーです。セルの中の try/catch が、本物の失敗と一緒に中断まで捕まえてしまうのです。Promise であるものは再スローするか、その判定を代わりにやってくれる $mol_fail_catch を使ってください。

循環購読（Circular subscription）

@ $mol_mem のメソッドが別のセルへ書き込んだか、自分が読んだものを結果的に無効化する副作用を行いました。計算は読んで返すだけです。書き込み、ネットワーク、タイマー、DOM は @ $mol_action のハンドラーに属します。同じメッセージのもう一つの出どころは、子への <=> バインディングと、その同じ子へ委譲するクラスのメソッドの組み合わせです。次の項目で説明します。

Maximum call stack（コールスタックがあふれる）

これを生む形は二つあります。一つ目。ツリーで子に tab? <=> tab? があり、クラスに tab() { return this.Head().tab() } がある場合です。子が所有者に尋ね、所有者が子に尋ねます。委譲する先の子への <=> を外してください。二つ目。サブビューを自分のクラスに付け替え、そのクラスがツリーに並んでいるプロパティで super を呼んでいる場合です。その super は基底の実装ではなく、並んでいるバインディングのためにツリーが生成したスタブで、スタブは所有者へ委譲し返します。代わりに、元の実装へ明示的に委譲してください。下にある付け替えの項目を参照してください。

大文字で書いた値が TypeScript からオーバーライドできない

GitHub でこのページを編集役に立ちましたか？はいいいえ前へデプロイ次へデータ取得このページの内容プロパティのオーバーライドが何も起きない、エラーも出ない入力欄にプレースホルダーや無効化、type を付けたい単語が一文字ずつバラバラに描画される画面が空っぽなのに、テストは緑データがいつまでも読み込まれず、コンポーネントが読み込み状態のまま固まる循環購読（Circular subscription）Maximum call stack（コールスタックがあふれる）大文字で書いた値が TypeScript からオーバーライドできない入れ子のリストで、どの行にも同じ項目が出るサブビューのクラスを変えたら中身が消えた基底コンポーネントの view.ts のメソッドがサブクラスに見当たらない同じ view.tree ファイルで宣言した基底コンポーネントが振る舞いを失うサブビューとその中のコンポーネントの間でスタイルが漏れる false の属性を狙ったセレクタが決してマッチしないスタイルに書いた数値が何も変えないスクロールビューの二つの子が重なって表示される minimal_height を変えても見た目が変わらない埋め込んだコンポーネントがページを横へ押し広げる外部の CSS が自分のコンポーネントに効かない現在のページへのリンクをクリックすると URL が消える入力のハンドラーが描画のたびに走る値のセッターで投げたエラーが表示されないキー付きのハンドラーのバインディングが「ない」と言われる使った覚えのないモジュールがバンドルに入っている次へ