Che cosa significa una funzione con 2 valori sul lato destro? (Modello -> Html msg)

Question

ho incontrato che nella guida:

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 ] 

Quindi questa è una funzione, che prende il Model. Html msg di solito mi sembra che stiamo chiamando la funzione Html con l'argomento msg.

msg non sembra avere alcun ruolo in nessuna altra parte della funzione viewValidation. Che cosa significa e in cosa consiste in questo caso?

Answer 1

Html Msg è solo un parametro di tipo, come è List Int. Mentre List Int denota un elenco che contiene l'elemento di tipo Int, allo stesso modo Html Msg descrive un codice HTML che può trattare/emettere messaggi di tipo Msg.

Ad esempio, se si dispone di un pulsante all'interno del codice HTML, potrebbe assomigliare a questo:

button [ onClick DoSomething ] [ text "caption" ] 

Dove DoSomething è un caso di tipo Msg.

Answer 2

Non mescolare la definizione del tipo con la normale esecuzione del codice. Html non è una funzione, è un tipo che accetta un parametro per definire un tipo per una funzione di visualizzazione.

Html msg è la definizione più generale che si può avere come msg è una variabile stessa, quindi restituisce Html che è indipendente dal tipo di messaggio che si sta utilizzando attualmente. Ciò potrebbe essere dovuto al fatto che non crea messaggi di eventi o perché la funzione di visualizzazione accetta i messaggi come parametri.

Come i commenti stabiliti Html() sarebbe un tipo molto stretto che è vincolato a non restituire nulla.

Il caso più comune sarà una funzione di visualizzazione che restituisce Html Msg - ad esempio HTML con messaggi basati sulle interazioni dell'utente.

Poiché Elm incoraggia la componentizzazione, è necessario tenere a mente anche Html.map. La firma del tipo è Html.map : (a -> b) -> Html a -> Html b. Nel contesto di componenti questo è più facilmente letta come

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

Si noti che quando si definiscono i messaggi nel componente genitore, si avrà qualcosa di simile:

type Msg = ChildMsg Child.Msg 

che significa che ChildMsg ha tipo di firma :

ChildMsg : Child.Msg -> Parent.Msg 

Quindi le mie funzioni di vista hanno un sacco di

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