モジュールのUIをアプリケーションのシェルの領域に埋め込むにはどうすればよいですか？

Question

モジュールのUIをアプリケーションのシェルの領域に埋め込むにはどうすればよいですか？

私はログイン私のエルムアプリケーションの領域に引っ張りたいモジュールがあります。 しかし、これを達成する方法は私には分かりません。

具体的には、ログインモジュールをブートして、アプリケーションのシェル内の領域がUIとして公開されるhtmlをレンダリングするにはどうすればよいですか？

ログインモジュール：

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 ] [] 
     ] 

アプリのシェル：

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

注： これは、WPFのためのプリズムのフレームワークを使用しているとき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 (..) 

を次のことを忘れないでくださいこれは戻って、ログインに渡し、その後、その後、ログインビューによって生成されたメッセージをラップ更新機能。

あなただけFYI Html.map here