Elm：渲染初始状态

Question

使用 React 和 Redux，我可以从 window 中获取一个初始状态对象（然后忽略它/之后删除它）。这对于加载当前用户或 URL 的资源标识符等概念很有用，例如:user_id（而不是在 Redux 中解析 URL 来获取它们）。

如何使用初始状态呈现我的 Elm 应用程序？

Answer 1

html + elm

<!DOCTYPE HTML>
<html>
  <head><meta charset="UTF-8"><title>Landing</title>
    <link rel="stylesheet" type="text/css" href="/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/styles.css">
    <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
    <script src="/semantic.min.js"></script>
    <script src="/elm.js"></script>
    <script id="sample-data" type="application/json">
      {{sample}}
    </script>
    <body>
      <script>
      var app = Elm.Main.fullscreen({
        host: document.location.host,
        protocol: document.location.protocol,
        sample: document.getElementById("sample-data").innerHTML
      });
      </script>
    </body>
  </head>
</html>

榆树：

type alias Flags =
    { host : String
    , protocol : String
    , sample : Maybe String
    }


init : Flags -> ( Model, Cmd Action )
init flags =
    ( { view =
            case flags.sample of
                Just string ->
                    SampleFleetViewModel <|
                        case Json.Decode.decodeString Codec.decodeFleetUpdates string of
                            Ok model ->
                                SampleFleetView.ActualModel model

                            Err error ->
                                SampleFleetView.Error error

                Nothing ->
                    EnterFleetUrlModel EnterFleetUrl.init
      , host = flags.host
      , protocol = flags.protocol
      }
    , Cmd.none
    )

Answer 2

您可以传入数据来初始化您的 Elm 应用程序，使用 programWithFlags 函数启动应用程序。例如用用户 id 初始化：

榆树：

module Main exposing (..)

import Html exposing (Html, div, h1, text)

main =
    Html.programWithFlags
        { init = init
        , view = view
        , update = update
        , subscriptions = (\_ -> Sub.none)
        }

-- MODEL

type alias Model =
    { userId : Int
    }

init : { userId : Int } -> ( Model, Cmd Msg )
init flags =
    -- This is the key piece. You can use the passed in "flags"
    -- record to build the initial state of your Model
    ( Model flags.userId, Cmd.none )

-- UPDATE

type Msg
    = NoOp

update : Msg -> Model -> ( Model, Cmd Msg )
update NoOp model =
    ( model, Cmd.none )

-- VIEW

view : Model -> Html Msg
view model =
    div [] [ h1 [] [ text ("User ID: " ++ toString model.userId) ] ]

Html:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="elm.js"></script>
  </head>
  <body>
  </body>
  <script type="text/javascript">
    // The flags get passed in here
    Elm.Main.fullscreen({ userId: 42 });
  </script>
</html>

Elm：渲染初始状态

Elm: Render with initial state

elm