本頁包含 Elm 0.18

組成

下面兩張圖表描繪此架構：

初始轉譯

(1) App 呼叫 Main.initialModel 取得應用程式的初始模型

(2) Main 呼叫 Widget.initialModel

(3) Widget 傳回其初始模型

(4) Main 傳回組合後的主模型，包含 widget 的模型

(5) App 呼叫 Main.view，帶入主模型

(6) Main.view 呼叫 Widget.view，帶入主模型內的widgetModel

(7) Widget.view 傳回轉譯後的 Html 給 Main

(8) Main.view 傳回轉譯後的 Html 給 App

(9) App 在瀏覽器轉譯出結果。

使用者互動

(1) 使用者點擊 increase 按鈕

(2) Widget.view 發出 Increase 訊息，由 Main.view 取得。

(3) Main.view 在訊息加上標籤，變成（WidgetMsg Increase）並送到 App

(4) App 呼叫 Main.update 帶入訊息及主模型

(5) 因為訊息已標上 WidgetMsg 標籤，Main.update 將更新委派到 Widget.update，連同主模型中widgetModel部份一併送去

(6) Widget.update 根據給定的訊息更新模型，此例為 Increase。傳回更新後 widgetModel 另外加上一個命令

(7) Main.update 更新主模型並傳回給 App

(8) App 帶入更新後模型再次轉譯視界

關鍵點

• Elm 架構提供了一種簡潔的方式組合（或巢狀）元件，無論有多少層級。
• 子元件完全不了解父元件。他們各自定義了自己的型別與訊息。
• 如果子元件特別需要什麼（例如，額外的模型），它必須透過函式標記式來"請求"。父元件負責提供子元件所需。
• 父元件不需要了解其子元件的模型或訊息。它只需要提供子元件需要的即可。