如何在 Elm 中将 html-input 解码为 int？

Question

有html-输入。我们监听输入事件并更新模型（这里是简单的字符串）。现在我想使用 Int 类型作为模型，并从输入值中解析 Int。我制作了另一个解码器并将初始模型的值更改为 0。在这些更改之后，当我键入数字时模型不会更改。为什么？如何实现？

import Html exposing (input, div, text)
import Html.Events
import StartApp.Simple
import Json.Decode

model = ""

view address model =
  let

    decoder =
      Html.Events.targetValue

    -- this decoder doesn't work
    decoderInt =
      Json.Decode.at ["target", "value"] Json.Decode.int

  in
    div [] [
      input [ Html.Events.on "input" decoder (Signal.message address) ] [],
      text (toString model)
    ]

update action model =
  action

main =
  StartApp.Simple.start { model = model, view = view, update = update }

Answer 1

Json 解码无效，因为 Json 值是一个字符串，即使字符串中的值是一个数字。例如，Json 值看起来像这样：

{ "target": { "value": "42" } }

Elm 的 Json 解码函数非常严格，因此它们会将 "42" 视为仅仅是一个字符串。您需要更进一步来构建一个解码器，将该字符串的内部解析为数字——如果用户键入非数字的内容，这一行为可能会失败。

为此，我们可以切换回最初使用 Html.Events.targetValue 解码器，因为它知道如何解码字符串值。然后我们将其传递给 Json.Decode.andThen 以提取该字符串的值并对其进行操作。

decoderInt =
  Html.Events.targetValue `Json.Decode.andThen` \str ->
    case String.toInt str of
      Ok i ->
        Json.Decode.succeed i
      Err msg ->
        Json.Decode.fail msg

使用 succeed 和 fail 将值映射回 Decoder Int 的类型。

如何在 Elm 中将 html-input 解码为 int？

How to decode html-input to int in Elm?

parsing

decode

input

elm