Elm：通過端口的父更新子組件

Question

父組件是否可能將其傳入端口的結果傳遞給子組件。

我一直在尋找構成父/子組件的示例（https://www.elm-tutorial.org/en/02-elm-arch/06-composing.html）。這是一個很好的例子 - 但我想通過Ports更新孩子的模型。這可能嗎？

Example Gist。

index.js

var num = 0; 
setInterval(function() { 
    num = num + 1 
    app.ports.tick.send(num) 
},1000); 

Ports.elm

port module Ports exposing (..) 

port tick : (Int -> msg) -> Sub msg 

Main.elm（父）

import Widget 

type Msg 
    = WidgetMsg Widget.Msg 


update : Msg -> AppModel -> (AppModel, Cmd Msg) 
update message model = 
    case message of 
     WidgetMsg subMsg -> 
      let 
       (updatedWidgetModel, widgetCmd) = 
        Widget.update subMsg model.widgetModel 
      in 
       ({ model | widgetModel = updatedWidgetModel }, Cmd.map WidgetMsg widgetCmd) 


subscriptions : AppModel -> Sub Msg 
subscriptions model = 
    Ports.tick WidgetMsg 

Widget.elm（兒童）

initialModel : Model 
initialModel = 
    { count = 0 
    , tickValue = 0 
    } 


type Msg 
    = Increase 
    | Tick Int 


update : Msg -> Model -> (Model, Cmd Msg) 
update message model = 
    case message of 
     Increase -> 
      ({ model | count = model.count + 1 }, Cmd.none) 

     Tick val -> 
      ({model | tickValue = val}, Cmd.none) 

Answer 1

您需要指定哪個子消息從端口接收到該int值。如果你更新你的家長訂閱功能，它會發送Widget Tick消息：

Ports.tick (WidgetMsg << Widget.Tick)