This page covers Elm 0.18

メイン

最後に、メインモジュールのすべてを配線する必要があります。

src/Main.elmを次のように変更します。

module Main exposing (..)

import Navigation
import Messages exposing (Msg(..))
import Models exposing (Model, initialModel)
import View exposing (view)
import Update exposing (update)
import Players.Commands exposing (fetchAll)
import Routing exposing (Route)


init : Result String Route -> ( Model, Cmd Msg )
init result =
    let
        currentRoute =
            Routing.routeFromResult result
    in
        ( initialModel currentRoute, Cmd.map PlayersMsg 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 }, Cmd.none )


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

新しいImport

NavigationとRoutingのためのImportを追加しました。

初期化

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

init関数は Routingに追加したparserから初期的な出力を受け取ります。パーサーの出力は Resultです。 Navigationモジュールは初期ブラウザ閲覧ロケーションを解析し、その結果を initに渡します。このroute初期値をモデルに格納します。

urlUpdate

urlUpdateは、ブラウザの場所が変更されるたびにNavigationパッケージによって呼び出されます。 initのように、ここではパーサの結果を得ます。ここで行うのは、新しいrouteをアプリケーションモデルに格納することだけです。

main

mainはHtml.programの代わりに Navigation.programを使います。 Navigation.programはHtml.programをラップしますが、ブラウザの場所が変更されたときにはurlUpdateコールバックを追加します。