iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

學會Elm寫前端系列 第 14

14 Elm的SPA裡的routing

Routing

我覺得routing用文字來描述有他的極限,但我又懶得畫圖(因為一天要寫一篇,還要畫圖真是強人所難啊…),建議大家下載這個專案,就是要來介紹elm的routing system的。如果你想要自己做一個elm 的 single page app,就有需要啦。在大計畫開始前,先來做做這個小小的專案吧。

git clone https://github.com/sporto/elm-navigation-pushstate-example.git

先認識這兩個套件,如果你要做routing 的話,一個是 Navigation, 另一個是UrlParser

有好工具才好工作,在Navigation裡,會有個 Html.program來取代原本的Html.program,才可以監聽是不是有location改變。

Same as Html.program, but your update function gets messages whenever
the URL
changes.

也就是說Navigation裡的update會幫你聽聽看有沒有位置改變,有的會也會重新render整個view。

type alias Location = { href : String , host : String , hostname : String , protocol : String , origin : String , port_ : String , pathname : String , search : String , hash : String , username : String , password : String }

你看,裡面還有一個叫Location的type alias,會放在 Html.program 裡的第一個parameter:
(Location -> msg), 當有位置改變,會去call elm-runtime 再去call
update。

可以看在elm-tutorial
裡的圖:
initial:
initial

when updating:
whne update

我們也不是大神,有神人寫好的例子,我們直接拿來用。再用之前,我們來讀讀code:


main : Program Never Model Msg
main =
    Navigation.program OnLocationChange
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
}

program會一直用 OnLocationChange 來監聽有沒有改變,如果會就會送出 location 的訊息給 update
function

type Msg
    = ChangeLocation String
    | OnLocationChange Navigation.Location

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ChangeLocation path ->
            ( { model | changes = model.changes + 1 }, Navigation.newUrl path )

        OnLocationChange location ->
            let
                newRoute =
                    parseLocation location
            in
( { model | route = newRoute }, Cmd.none )

當 update function 收到後,就會去parse url,這時候就是UrlParser的作用了:

matchers : UrlParser.Parser (Route -> a) a
matchers =
    UrlParser.oneOf
        [ UrlParser.map HomeRoute UrlParser.top
        , UrlParser.map AboutRoute (UrlParser.s "about")
]

parseLocation : Navigation.Location -> Route
parseLocation location =
    case (UrlParser.parsePath matchers location) of
        Just route ->
            route

        Nothing ->
            NotFoundRoute

詳細的介紹,我推薦看UrlParser的doc但常用的 oneOf, map, top, s 這個例子都有用上了。其實不難理解,而且很快就可以上手,如果再不懂可以用elm-reactor,的debug工具,看他送出什麼訊息,研究一下就可以上手了。明天再來說說這些除錯工具好了。


上一篇
13 慎選資料結構--談Elm的優化
下一篇
15 如何在Elm 裡除錯:dubug in Elm
系列文
學會Elm寫前端30

尚未有邦友留言

立即登入留言