Elmの初期化方法

Elmのパラメータを渡す方法

Elmを張り付かせる

ElmでHtml側からパラメータを渡す方法、テンプレート内のdivへidでElmのコードを張り付かせて

<div id="usrId-10">
<script type="text/javascript">
  var app = Elm.Func.init({
      flags: {
        "token": "Sj8slkusUHJ",
        "usrId": 10
      }
      , node: document.getElementById('usrId-10')
  });

引数の定義

Elm側で取得する、まず受け取るための型を用意する、要素の型はjavascript側から渡される型と合わせておく。面倒なら全部Stringでも構いませんが、Elmがしっかりマーシャルしてくれるので合わせておいた方がいいでしょう。

type alias ArgInfo =
    { token : String
    , usrId : Int
    }

モデルの定義

そして初期化でモデルへ引き継ぐ、モデルも同じく定義して

type alias Model =
    {
      token : String
    , usrId : Int
    , err : Maybe String
    }

初期化する方法

初期化は initialState で main で init に指定されているただの関数です、init へ直接書いても同じです。

main : Program ArgInfo Model Msg
main =
    Browser.element
        { init = initialState
        , view = view
        , update = update
        , subscriptions = subscriptions
        }
...

引数を取らない場合、こうなります、合わせてinitも引数を取らないよう書く必要があります。

main : Program () Model Msg
...

そして、初期化でモデルを更新します。

initialState : ArgInfo -> ( Model, Cmd Msg )
initialState info =
    ( {
        token = info.token
      , usrId = info.usrId
      , err = Nothing 
      }
    , Cmd.none
    )

モデルの初期化

モデルが初期化されると、viewが呼ばれます、以後は update 経由でモデルが更新されます（今回は説明を省いています）。

view : Model -> Html Msg
view model =
    span [ ] [ text (String.fromInt(model.usrId)) ]

Elmは型に厳密なので、 text の型が

> Html.text
<function> : String -> Html.Html msg

なので、 String.fromInt で Int から String へ変えろとしっかりやらされます（よいです）

Posted on 2021-01-26 19:48:20

魴鮄のブログ