右边有两个值的函数是什么意思?(型号->Html消息)

Question

我在指南中遇到过：

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 ]

这是一个函数，它取Model。在我看来，Html msg通常看起来像是用参数msg调用函数Html。

msg似乎在viewValidation功能的任何其他部分都没有发挥任何作用。那么，在这种情况下，它意味着什么？它的作用是什么？

Answer 1

Html Msg和List Int一样只是一个类型参数。虽然List Int表示一个包含Int类型元素的列表，但类似地，Html Msg描述了一些可以处理/发送Msg类型消息的HTML。

例如，如果你的HTML中有一个按钮，它可能看起来像这样：

button [ onClick DoSomething ] [ text "caption" ]

其中DoSomething是Msg类型的情况。

Answer 2

不要将类型定义与代码的正常执行混为一谈。Html不是一个函数，它是一个使用参数来定义视图函数类型的类型。

Html msg是最通用的定义，因为msg本身就是一个变量，所以它返回的Html与您当前使用的消息类型无关。这可能是因为它不创建事件消息，也可能是因为视图函数将消息作为参数。

由于注释已建立，Html ()将是一个非常狭窄的类型，它被限制为不返回任何内容。

不过，最常见的情况是视图函数返回Html Msg，即Html，其中包含基于用户交互的消息。

由于Elm鼓励组件化，您还需要记住Html.map。它的类型签名是Html.map : (a -> b) -> Html a -> Html b。在组件的上下文中，这更容易被解读为

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

请注意，当您在父组件中定义消息时，您将得到以下内容：

type Msg = ChildMsg Child.Msg

这意味着ChildMsg具有类型签名：

ChildMsg : Child.Msg -> Parent.Msg

所以我的视图函数有很多

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