在 Elm 中，如何在页面路由到后触发 Cmd？

Question

我有一个包含图表的页面的 Elm SPA。我正在使用 JS 端口来激活 chart.js 图表。加载页面后，我想通过端口发送图表数据。我能够在事件上很好地连接命令（例如 select 更改），但是我不知道如何在页面加载时触发命令。

我尝试在我的应用程序的 init 中连接命令，但当然这会在我检索我的应用程序数据之前触发。

非常感谢！

一些示例代码：（我正在使用 "chart" 创建 Cmd，其中是我的端口名称，它带有基于我的模型的图表数据。）

Main.elm

init : Result String Route -> ( Model, Cmd Msg )
init result =
    let
        currentRoute =
            Routing.routeFromResult result
    in
        ( initialModel currentRoute, Cmd.map VendorsMsg fetchAll )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


urlUpdate : Result String Route -> Model -> ( Model, Cmd Msg )
urlUpdate result model =
    let
        currentRoute =
            Routing.routeFromResult result
    in
        ( { model | route = currentRoute }, chart (computeChartData model) )


main : Program Never
main =
    Navigation.program Routing.parser
        { init = init
        , view = view
        , update = update
        , urlUpdate = urlUpdate
        , subscriptions = subscriptions
        }

Routing.elm

type Route
    = HomeRoute
    | AdminRoute
    | EditVendorRoute VendorId
    | NotFoundRoute


matchers : Parser (Route -> a) a
matchers =
    oneOf
        [ format HomeRoute (s "")
        , format EditVendorRoute (s "admin" </> int)
        , format AdminRoute (s "admin")
        ]


hashParser : Navigation.Location -> Result String Route
hashParser location =
    location.hash
        |> String.dropLeft 1
        |> parse identity matchers


parser : Navigation.Parser (Result String Route)
parser =
    Navigation.makeParser hashParser


routeFromResult : Result String Route -> Route
routeFromResult result =
    case result of
        Ok route ->
            route

        Err string ->
            NotFoundRoute

Answer 1

您应该能够在 init 函数期间触发您的 chart 端口，给定您的初始模型：

init : Result String Route -> ( Model, Cmd Msg )
init result =
    let
        currentRoute =
            Routing.routeFromResult result
        model =
            initialModel currentRoute
    in
        ( model, Cmd.batch [ Cmd.map VendorsMsg fetchAll, chart (computeChartData model) ] )

即使您在浏览器中手动输入 URL，这也能确保端口被触发。

Answer 2

您可以使用标志在页面加载时将初始数据传递给您的程序。因此，如果您担心页面加载时需要初始数据，只需将其传递到 elm 代码即可。

在 Elm 中，如何在页面路由到后触发 Cmd？

In Elm, how do I fire a Cmd once a page has been routed to?

elm