SPA动态路由和页面渲染

Question

我是 Elm 的新手，可能对架构的理解不正确，这可能是一个 XY 问题（但我还不知道...）

无论如何，我正在尝试在 Elm 中创建一个 url-routed SPA。我正在使用 evancz/start-app 生成单独的动态页面，使用 elm-achitecture-tutorial example 1 作为每个 'page':

的起点

Frontend.Pages.Home.display : Signal Html
Frontend.Pages.Home.display = StartApp.start
    { model = 0
    , update = update
    , view = view
    }

type alias Model = Int

type Action = Increment | Decrement

update : Action -> Model -> Model
update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

view : Signal.Address Action -> Model -> Html
view address model =
  div []
    [ button [ onClick address Decrement ] [ text "-" ]
    , div [ countStyle ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]

我正在使用 TheSeamau5/elm-router 到

route : String -> Signal Html
route = Router.match
    [ "/" :-> Frontend.Pages.Home.display
    ] Frontend.Pages.Errors.FourOhFour.display

我正在使用 TheSeamau5/elm-history 收集最新的 url:

main : Signal Html.Html
main = Frontend.Routes.route History.path

很明显这是错误；我将 Signal String 传递给采用 String 的方法。问题是如果我使用以下内容：

main = Signal.map Frontend.Routes.route History.path

我希望 Signal.map Frontend.Routes.route History.path 是类型 Signal Html，编译器却抱怨冲突：

The type annotation for `main` does not match its definition. 

7| main : Signal Html.Html
          ^^^^^^^^^^^^^^^^ As I infer the type of values flowing through your program, I see a conflict between these two types:

Html.Html

Signal Html.Html

这是怎么回事？似乎 Signal.Map 是 "unpacking" 而 Signal Html。是这样吗？

无论如何，我的核心问题似乎是：我如何展示一个单页应用程序，路由到基于 Signal String 的单独反应 'pages'而不是重新实现 Router?

提前致谢。

Answer 1

我相信您的最终结果是 Signal (Signal Html)，而主要结果是 Signal Html。我相信您收到的错误专门针对 Signal a 所期望的类型。它是说，我期望 a 是 Html 但实际上我发现它是 Signal Html.

我们有以下类型：

Signal.map : (a -> result) -> Signal a -> Signal result
Frontend.Routes.route : String -> Signal Html
Historypath : Signal String

然后我们有 Signal.map Frontend.Routes.route 类型 Signal String -> Signal (Signal Html).

然后我们应用 History.path 得到最终结果 Signal (Signal Html)

如果您将 route 更改为 return Html 而不是 Signal Html 您应该可以开始了。

SPA动态路由和页面渲染

SPA Dynamic Routing and Page Rendering

elm