代码之家 › 专栏 › 技术社区 › Saurabh Nanda

在Elm中,一个页面如何发出消息导航到另一个页面?

elm-architecture elm navigation architecture

3

Saurabh Nanda · 技术社区 · 6 年前

以下是我的Elm应用程序当前的结构:

类型.elm:

import Pages.Login.Types as Login
import Pages.Dashboard.Types as Dashboard

type Page = LoginPage
          | DashboardPage

type Msg = LoginMsg Login.Msg
         | DashboardMsg Dashboard.Msg
         | NavigationStart Page
         | NavigationEnd Page

type Model = LoginModel Login.Model
           | DashboardModel Dashboard.Model

登录名.elm:

import Pages.Login.Types as PageTypes
import Types

view : (PageTypes.Msg -> msg) -> PageTypes.Model -> Html msg
view = -- some code

试图保持页面之间的相对独立性 Msg Model 类型可以独立地推理
NavigationStart page

2 回复 | 直到 6 年前

1

2

JosephStevens 6 年前

查看Richard Feldman的单页回购示例 here . 实际上,每个应用程序都有一个顶层的更新。

2

0

robx 6 年前

如果要从子页面的 view

 view : Login.Model -> Html Types.Msg

如果您坚持按照指示抽象消息类型,则可以为导航消息传递一个额外的参数:

view : (Types.Page -> msg) -> (Login.Msg -> msg) -> Login.Model -> Html msg
view navigateTo wrapPageMsg model = ...

NavigationStart

最后,如果你需要子页面的 update 为了能够触发顶级导航,可以将该信息放入返回值中:

-- Login.update, updates the model and
-- optionally returns a navigation destination
update : Login.Msg -> Login.Model -> (Login.Model, Maybe Types.Page)

-- top level update
update : Msg -> Model -> Model
update msg model =
    let
        -- navigation helper
        navigateTo page model = ...
    in
    case (msg, model) of
        (NavigationStart p, _) ->
            navigateTo p model
        (LoginMsg lmsg, LoginModel lmodel) ->
            let
                (newlmodel, navigate) = Login.update lmsg lmodel
            in
            case navigate of
                Just p ->
                    navigateTo p model
                Nothing ->
                    LoginModel newlmodel
        ...