$mol
搜尋
⌘ K
文件
遊樂場
比較
生態系統
關於
ZH_HK
疑難排解
Getting Started
介紹
心智模型
快速開始
從 TypeScript 到 view.tree
專案結構
工具鏈
Essentials
安裝
視圖
狀態與響應式
路由
渲染
測試
部署
疑難排解
Data
資料獲取
資料模式
Giper Baza
More
展示
來自 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
疑難排解
本頁每一條的形狀都一樣:建置是綠的,稽核是乾淨的,主控台一聲不吭,而畫面要麼空着,要麼不是你想要的樣子。編譯器看不見這些錯誤,因為每一個都是合法的程式,只不過它描述的是另一個元件。找到那條讀起來像你眼前現象的標題,下面就是原因和修法。
我覆寫了屬性卻沒有任何效果,也不報錯
view
.
tree
裏的名字和類別裏方法的名字不一致,最常見的是大小寫:樹裏寫
exchange_form
,類別裏寫
exchangeForm
。這是兩個屬性。類別裏的那個永遠不會被呼叫,樹裏的那個保持預設值,而且沒有任何東西會把這件事報出來。
名字處處都是
snake_case
,而且必須逐字母一致。改過
.
view
.
ts
之後,請檢查每一處覆寫是否仍然對應一個存在的屬性;樹旁邊產生的
-
view
.
tree
/
*
.
view
.
tree
.
d
.
ts
就是用來比對的清單。
輸入框要設定 placeholder、停用狀態或輸入類型
這些都是
$mol_string
的屬性:
hint
是 placeholder,
enabled
是停用狀態,
type
是輸入類型。在用到這個輸入框的地方設定它們:
1
<=
Password
$mol_string
2
hint
\Password
3
type
\password
4
enabled
<=
can_edit
true
5
value
?
<=>
password
?
\
任何其他元件的任何其他屬性都用同樣的方式找到:打開它的
.
view
.
tree
,正如
如何閱讀原始碼
所示。
attr
*
是給元件本身沒有建模的真實 DOM 屬性用的,它自己也有個坑:一個不以
^
開頭的區塊會整個替換掉基底類別的屬性字典,於是這樣寫的
$mol_button
會丟掉
disabled
、
role
和
tabindex
。用
^
開頭來繼承,然後再加你自己的鍵:
1
attr
*
2
^
3
data_kind
\primary
一個詞被拆成一個個字母渲染出來
在期待清單的地方傳了一個字串,於是字串被逐字元攤開了。字串以
\
開頭,清單以
/
開頭。最常見的情形是
sub
,它是一個清單:
1
sub
/
<=
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
,它會替你做這個判斷。
循環訂閱
某個
@ $mol_mem
方法寫了另一個單元,或者做了副作用,結果讓它讀過的東西失效了。計算只讀取和回傳;寫入、網絡、計時器和 DOM 屬於
@ $mol_action
處理器。同一條訊息的另一個來源,是對某個子節點的
<
=
>
繫結,加上類別裏一個轉發給同一個子節點的方法,下一條就說這個。
Maximum call stack 呼叫堆疊溢位
有兩種形狀會導致它。第一種,樹裏給子節點寫了
tab
?
<
=
>
tab
?
,而類別裏寫了
tab
(
)
{
return
this
.Head
(
)
.tab
(
)
}
:子節點問擁有者,擁有者又問子節點。去掉指向你所轉發的那個子節點的
<
=
>
。
第二種,某個子視圖被重新指定成了你自己的類別,而類別在樹裏列出的某個屬性上呼叫了
super
。那個
super
並不是基底類別的實作,而是樹為這條繫結產生的存根,而存根又轉發回擁有者。請明確地轉發給原本的實作,見下面關於重新指定型別的那一條。
大寫開頭的值無法從 TypeScript 覆寫
<
=
Label
*
\
產生的方法叫
Label
,而類別裏的
label
(
)
是另一個方法。子視圖首字母大寫,值首字母小寫,樹裏的大小寫決定了所產生方法的名字。
巢狀清單的每一列都顯示同一筆資料
在 GitHub 上編輯此頁
這有幫助嗎?
是
否
上一頁
部署
下一頁
資料獲取
本頁內容
我覆寫了屬性卻沒有任何效果,也不報錯
輸入框要設定 placeholder、停用狀態或輸入類型
一個詞被拆成一個個字母渲染出來
畫面是空的,測試卻是綠的
資料永遠載入不出來,元件卡在載入狀態
循環訂閱
Maximum call stack 呼叫堆疊溢位
大寫開頭的值無法從 TypeScript 覆寫
巢狀清單的每一列都顯示同一筆資料
我改了子視圖的類別,它的內容就消失了
子類別上找不到基底元件 view.ts 裏的方法
宣告在同一個 view.tree 檔案裏的基底元件丟了自己的行為
樣式在子視圖和它內部的元件之間串了
針對 false 屬性的選擇器永遠匹配不上
樣式裏寫了數字卻毫無變化
捲動視圖的兩個子節點疊在了一起
minimal_height 看不出任何效果
嵌入的元件把頁面撐得左右捲動
第三方 CSS 對我的元件不起作用
點擊指向當前頁面的連結反而清空了 URL
我的輸入處理器每次渲染都會執行
我在 value 的 setter 裏拋出的錯誤從來不顯示
帶鍵的處理器繫結被報告為缺失
打包結果裏出現了我從未用過的模組
下一步
Type to search the documentation.