Elm: Übergeordnetes Update Untergeordnete Komponente über Ports

Question

Ist es möglich, dass eine übergeordnete Komponente das Ergebnis ihres eingehenden Ports an eine untergeordnete Komponente weitergibt?

Ich habe dieses Beispiel der zusammensetzenden Eltern/Kind-Komponenten (https://www.elm-tutorial.org/en/02-elm-arch/06-composing.html) betrachtet. Dieses Beispiel ist großartig - aber ich möchte auch gerne das Modell des Kindes über Ports aktualisieren. Ist das möglich?

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 (Parent)

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 (Child)

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

Sie müssten angeben, welche untergeordnete Nachricht den int-Wert vom Port erhält. Wenn Sie Ihre Mutter Abonnements-Funktion, um dieses Update, wird es die Widget Tick Nachricht senden:

Ports.tick (WidgetMsg << Widget.Tick)