使用Elm中的select更改记录值

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,但我真的不明白怎么做.我已经阅读了文档中的示例,但没有选择...有人可以帮我吗？

Answer 1

与上一个问题一样,您必须change在下拉列表中处理事件以通知更改.

首先,让我们定义一个消息,我们可以将其用于Month下拉列表中的更改.

已更新至Elm-0.18

type Msg
  = Submit
  | MonthChanged Int

然后我们需要将其合并MonthChanged到on事件处理程序中.这是使用JSON解码器完成的,但你需要一个JSON解码器,轮流在选项为整数的字符串值,让我们用targetValueIntParse从榆树社区/ HTML的额外定义on "change"处理程序.您的select代码如下所示:

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

最后,您的update函数需要在模型中设置month和cost值.您可以通过在case语句中添加以下内容来完成此操作:

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

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