如何将模块的 UI 嵌入到应用程序的 shell 区域中？

Question

如何将模块的 UI 嵌入应用程序的 shell 区域？

我有一个 Login 模块，我想将其拉入我的 Elm 应用程序的某个区域。但是，我不清楚如何完成此操作。

具体来说，我如何 bootstrap Login 模块呈现 html 我的应用 shell 中的一个区域将显示为 UI?

登录模块：

module Login exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


-- MODEL


type alias Model =
    { username : String, password : String }


model : Model
model =
    Model "" ""


init : ( Model, Cmd Msg )
init =
    ( model, Cmd.none )



-- UPDATE


type Msg
    = UserInput String
    | PasswordInput String
    | SignIn String String


update : Msg -> Model -> Model
update msg model =
    case msg of
        UserInput v ->
            model

        PasswordInput v ->
            model

        SignIn username password ->
            model



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ input [ class "signin", type_ "submit", value "Signin", onClick <| SignIn (model.username) (model.password) ] []
        , input [ class "signin", type_ "password", placeholder "password", onInput PasswordInput, value model.password ] []
        , input [ class "signin", type_ "text", placeholder "username", onInput UserInput, value model.username ] []
        ]

应用Shell:

view : Model -> Html Msg
view model =
    div []
        [ header [] [ Login.view ??? ]
        ]

注：这是WPF使用Prism框架编写UX的常用方法。

Answer 1

为此你需要做的是将它导入到你的主模块中。然后为登录消息添加另一个顶级消息类型，并在更新功能中为其添加一个案例。代码看起来像这样...

import Login

type alias Model =
    { loginModel : Login.Model
    , (more stuff)
    }

type alias Msg
    = HandleLogin Login.Msg
    | (more stuff)

update msg model =
    case msg of
        HandleLogin subMsg ->
            let
                newState = Login.update subMsg model.loginState
             in
                 { model | loginState = newState }
         (more stuff)

 view model =
     div [] [
         Html.map HandleLogin <| Login.view model.loginState
     ]

另外不要忘记登录模块中的以下内容

module Login exposing (..)

这会包装登录视图生成的消息，然后将它们传递回登录更新函数。

您可以阅读更多关于 Html.map here

如何将模块的 UI 嵌入到应用程序的 shell 区域中？

How do I embed a module's UI into a region of an application's shell?

functional-programming

elm