Elm Routing-Route statt Pfad angeben

Question

Ich bin sehr neu in Elm und haben nur am Elm Tutorial App sah https://github.com/sporto/elm-tutorial-app

Ich habe mich gefragt, wie ich Seite ändern könnte, wenn auf einen Link zu klicken, die Strecke statt der Pfad angeben .

Dies wird die Routing-

type Route 
    = HomeRoute 
    | NotFoundRoute 

matchers : Parser (Route -> a) a 
matchers = 
    oneOf 
     [ map HomeRoute top ] 

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

     Nothing -> 
      NotFoundRoute 

nun in der Ansicht würde ich gerne HomeRoute holen, wenn sie auf dem Menü-Link

geklickt

menuItems : List MenuItem 
menuItems = 
    [ { text = "Dashboard", iconName = "dashboard", route = HomeRoute } 
    ] 


viewDrawerMenuItem : Model -> MenuItem -> Html Msg 
viewDrawerMenuItem model menuItem = 
    Layout.link 
    [ Layout.onClick (NavigateTo menuItem.route) 
    , (Color.background <| Color.color Color.BlueGrey Color.S600) when (model.route == menuItem.route) 
    , Options.css "color" "rgba(255, 255, 255, 0.56)" 
    , Options.css "font-weight" "500" 
    ] 
    [ Icon.view menuItem.iconName 
     [ Color.text <| Color.color Color.BlueGrey Color.S500 
     , Options.css "margin-right" "32px" 
     ] 
    , text menuItem.text 
    ] 

Ich möchte die Nachricht NavigateTo implementieren, aber bin nicht sicher, Wie.

Ich könnte ein Update erstellen NavigateTo, die eine Route als Zeichenfolge nimmt und dann Navigation erstellen eine neue URL. Wie

NavigateTo path -> 
      (model, Navigation.newUrl path) 

Doch statt einen Pfad als String mit mir eher die Union Typ Route benutzen würde.

Answer 1

In jedem Fall müssen Sie eine Funktion Route zu Zeichenfolge für die Umwandlung:

pageToString : Route -> String 
pageToString route = 
    case page of 
     HomeRoute -> "home" 
     AboutRoute -> "about" 
     ContactRoute -> "contact" 
     LoginRoute -> "login" 
     DashboardRoute -> "dashboard" 
     NotFoundRoute -> "404" 

Und dann kann man so etwas wie tun:

NavigateTo : Route -> (Model, Cmd a) 
NavigateTo route -> 
      (model, (Navigation.newUrl <| pageToString route)) 

Answer 2

sind Sie wahrscheinlich nach unten nicht zu wollen, gehen um zu gehen die Hop Route wie es ist deprecated for Elm v0.18. Navigation hat crude example von, wie es zurzeit getan werden sollte.

zu einem anderen Kommentar hinzufügen kann es klüger sein, ein String.join auf einem List String zu tun, da Sie eine Parser bauen können, die viele Schrägstriche verarbeiten kann.

reverse : Route -> String 
reverse route = 
    String.join "/" 
     << (::) "" 
    <| case route of 
      Index -> 
       [ "" ] 

      Foo -> 
       [ "foo" ] 

      FizzBuzz x -> 
       [ "fizz", "buzz", x ] 

(Ich würde dies als Kommentar hinterlassen, aber Stackoverflow hat diese dumme Ruf Grenze)