Mit React und Redux kann ich ein initiales Zustandsobjekt von window (und ignorieren Sie es/löschen Sie danach). Dies ist nützlich zum Laden von Konzepten wie dem aktuellen Benutzer oder den Ressourcenidentifizierern der URL, z. :user_id (statt die URL in Redux zu analysieren, um sie zu erhalten).Elm: Render mit Anfangszustand
Wie kann ich meine Elm-App mit einem Anfangszustand rendern?
Sie in Daten passieren können Ihre Elm-Anwendung mit der programWithFlags Funktion zum Starten der App zu initialisieren.
Elm:
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>
<!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>
Ulme:
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
)
Sie wahrscheinlich benötigen Ports https://guide.elm-lang.org/interop/javascript zum Beispiel mit einer Benutzer-ID zu initialisieren. html – rofrol
@LukaJacobowitz Ich weiß nicht, wo ich anfangen soll. – steel
@rofrol es sieht aus wie Flaggen könnte die nächste Ähnlichkeit sein, aber ähnliches Konzept zu Häfen. Ich habe es in deinem Link gefunden. Wenn Sie eine vollständige Antwort posten möchten, würde ich Ihnen gerne Kredit geben. – steel