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" } } 

をエルムの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のタイプに値をマップするために存在します。