This page covers Elm 0.18

ナビゲーション

次に、ビュー間を移動するためのボタンを追加しましょう。

EditPlayerメッセージ

src/Players/Messages.elmに2つの新しいアクションを追加するように変更してください：

...

type Msg
    = OnFetchAll (Result Http.Error (List Player))
    | ShowPlayers
    | ShowPlayer PlayerId

ShowPlayersとShowPlayerを追加しました。

プレーヤーリスト

プレイヤーのリストは、各プレイヤーが ShowPlayerメッセージをトリガーするためのボタンを表示する必要があります。

まず、src/Players/List.elmにHtml.Eventsを追加してください：

import Html.Events exposing (onClick)

このボタンの最後に新しい機能を追加します：

editBtn : Player -> Html Msg
editBtn player =
    button
        [ class "btn regular"
        , onClick (ShowPlayer player.id)
        ]
        [ i [ class "fa fa-pencil mr1" ] [], text "Edit" ]

ここでは、編集したいプレイヤーのIDで ShowPlayerをトリガーします。

そして、このボタンを含むように playerRowを変更してください：

playerRow : Player -> Html Msg
playerRow player =
    tr []
        [ td [] [ text (toString player.id) ]
        , td [] [ text player.name ]
        , td [] [ text (toString player.level) ]
        , td []
            [ editBtn player ]
        ]

プレイヤー編集

編集ビューにナビゲーションボタンを追加しましょう。 /src/Players/Edit.elmで：

1つ以上のインポートを追加します：

import Html.Events exposing (onClick)

リストボタンの最後に新しい関数を追加します：

listBtn : Html Msg
listBtn =
    button
        [ class "btn regular"
        , onClick ShowPlayers
        ]
        [ i [ class "fa fa-chevron-left mr1" ] [], text "List" ]

ここでは、ボタンをクリックすると ShowPlayersを送ります。

そしてこのボタンをリストに追加し、 nav関数を以下のように変更します：

nav : Player -> Html Msg
nav model =
    div [ class "clearfix mb2 white bg-black p1" ]
        [ listBtn ]

プレーヤーの更新

最後に、src/Players/Update.elmは新しいメッセージに応答する必要があります。

import Navigation

そして、2つの新しい枝をcase式に追加します。

update : Msg -> List Player -> ( List Player, Cmd Msg )
update message players =
    case message of
        ...

        ShowPlayers ->
            ( players, Navigation.newUrl "#players" )

        ShowPlayer id ->
            ( players, Navigation.newUrl ("#players/" ++ id) )

Navigation.newUrlはコマンドを返します。 Elmがこのコマンドを実行すると、ブラウザの閲覧ロケーションが変わります。

テストする

http://localhost:3000/#playersのリストに行きます。編集ボタンが表示されます。クリックすると、その場所が編集ビューに変わります。

これまでのアプリケーションコードはhttps://github.com/sporto/elm-tutorial-app/tree/018-07-navigationになります。