Was bedeutet eine Funktion mit 2 Werten auf der rechten Seite? (Modell -> Html msg)

Question

Ich habe festgestellt, dass in der Führung:

viewValidation : Model -> Html msg 
viewValidation model = 
    let 
    (color, message) = 
     if model.password == model.passwordAgain then 
     ("green", "OK") 
     else 
     ("red", "Passwords do not match!") 
    in 
    div [ style [("color", color)] ] [ text message ] 

Also das ist eine Funktion, die die Model nimmt. Html msg sieht für mich normalerweise so aus, als würden wir die Funktion Html mit dem Argument msg aufrufen.

msg scheint jedoch keine Rolle in einem anderen Teil der viewValidation Funktion zu spielen. Was bedeutet es und wofür ist es in diesem Fall?

Answer 1

Html Msg ist nur ein Typparameter, wie List Int ist. Während List Int eine Liste angibt, die Element vom Typ Int enthält, beschreibt ähnlich Html Msg einige HTML, die Nachrichten des Typs Msg behandeln/ausgeben können.

Zum Beispiel, wenn Sie auf eine Schaltfläche in Ihrem HTML haben, es könnte wie folgt aussehen:

button [ onClick DoSomething ] [ text "caption" ] 

Wo DoSomething ein Fall des Msg Typ ist.

Answer 2

Mischen Sie die Typdefinition nicht mit der normalen Ausführung von Code. Html ist keine Funktion, es ist ein Typ, der einen Parameter verwendet, um einen Typ für eine Ansichtsfunktion zu definieren.

Html msg ist die allgemeinste Definition, die Sie als msg haben können, ist eine Variable selbst, also gibt das Html zurück, das unabhängig von dem msg-Typ ist, den Sie gerade verwenden. Dies kann entweder daran liegen, dass keine Ereignisnachrichten erstellt werden, oder weil die Ansichtsfunktion Nachrichten als Parameter akzeptiert.

Wie die Kommentare festgelegt Html() wäre ein sehr enger Typ, der gezwungen ist, nichts zurückzugeben.

Der häufigste Fall ist jedoch eine View-Funktion, die Html Msg zurückgibt - d.h. HTML mit Nachrichten, die auf Benutzerinteraktionen basieren.

Da Elm Komponentenisierung fördert, müssen Sie auch Html.map beachten. Es ist Typ Unterschrift Html.map : (a -> b) -> Html a -> Html b. Im Rahmen der Komponenten ist dies leichter zu lesen als

Html.map : (Child.Msg -> Parent.Msg) -> Html Child.Msg -> Html Parent.Msg 

Beachten Sie, dass, wenn Sie Ihre Nachrichten in Ihrem Stammkomponente definieren, haben Sie so etwas wie:

type Msg = ChildMsg Child.Msg 

was bedeutet, dass ChildMsg Typ hat Unterschrift :

ChildMsg : Child.Msg -> Parent.Msg 

So haben meine Ansicht Funktionen viel

parentView model = 
    -- childView model.child |> Html.map ChildMsg 
    Html.map ChildMsg (childView model.child)