Elm：初期状態のレンダリング

ReactとReduxを使用して、windowの初期状態オブジェクトを取得して（無視してから削除することができます）これは、現在のユーザーのような概念やURLのリソース識別子をロードする場合に便利です。 :user_id（取得するためにReduxでURLを解析するのではなく）。Elm：初期状態のレンダリング

どのようにして私のElmアプリケーションを初期状態でレンダリングできますか？

出典

2016-12-29 steel

おそらくhttps://guide.elm-lang.org/interop/javascriptポートが必要です。 html – rofrol

@LukaJacobowitz私はどこから始めるべきかわかりません。 – steel

@rofrolそれはflagsのように見えるかもしれませんが、ポートに類似した概念です。私はあなたのリンクでそれを見つけました。完全な回答を投稿したい場合、私はあなたに信用を与えることをうれしく思います。 – steel

あなたがアプリを起動する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>

出典

2016-12-30 17:07:17 robertjlooby

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 
    )

出典

2016-12-29 22:36:32 Reactormonk

Elm：初期状態のレンダリング

答えて

関連する問題