Question

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

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

我有2种方法可以使用此模型： - 在此示例中，用户更改月份并动态更改成本（成本=月* 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

与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值。您可以通过在case语句中添加以下内容来完成此操作：

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

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

使用Elm中的select更改记录值

1 个答案: