Question

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

我有一个登录模块，我希望将其放入我的Elm应用程序的某个区域。但是，我不清楚如何做到这一点。

具体来说，我如何引导登录模块呈现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 ] []
        ]

App 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的区域中？

1 个答案: