elm - 在 Elm 中通过选择更改记录值

Question

我尝试做一件简单的事情，但我很难理解如何编码。假设这条记录

type alias Model =
  { month : Int
  , cost : Int
  , email : String
  }

我有两种方法来使用这个模型:- 在这个例子中，要么用户改变月份，要么动态改变成本(成本=月* 10)- 或用户提交并以 json 格式将数据发送到服务器

我的观点是这样的:

durationOption duration =
  option [value (toString duration) ] [ text (toString duration)]

view model =
  Html.div []
    [ 
    , input [ placeholder "my@email.com" ] []
    , select []
      (List.map durationOption [0..12]) -- month selector
    , Html.span [][text (toString model.total)] -- value automatically updated when users changes month value in the select
    , button [ onClick Submit ] [text "Send"]
    ] 

不幸的是，我不明白如何更新值，如何只更新成本:

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of
    Submit ->
      (model, Cmd.none)
    {-
    Calculate ->
       ???? 
    -}

我想我必须调用 Calculate，但我真的不知道该怎么做。我已经从文档中阅读了示例，但是 select 没有任何内容......有人能帮助我吗 ？

Answer 1

如 your previous question ，您必须处理下拉列表中的 change 事件才能收到更改通知。

首先让我们定义一个消息，我们可以使用它来更改月份下拉列表。

更新到 Elm-0.18

type Msg
  = Submit
  | MonthChanged Int

然后我们需要将 MonthChanged 合并到 on 事件处理程序中。这是通过 Json 解码器完成的，但是您需要一个 Json 解码器将选项中的字符串值转换为整数，所以让我们使用 targetValueIntParse来自 elm-community/html-extra定义 on "change" 处理程序。您的 select 代码如下所示:

select [ on "change" (Json.map MonthChanged targetValueIntParse) ]

最后，您的update 函数需要在模型中设置month 和cost 值。您可以通过将以下内容添加到您的案例陈述中来做到这一点:

MonthChanged month ->
  ({ model | month = month, cost = month * 10 }, Cmd.none)

我发布了一个工作示例 https://runelm.io/c/h2k你可以在浏览器中运行