Elm'de int için html-girdisi nasıl çözülür?

Question

Burada html girişi var. Giriş olaylarını dinler ve modeli güncelleriz (burada basit bir dizedir). Şimdi model için Int türünü kullanmak ve Int'nin giriş değerinden ayrılmasını istiyorum. Başka bir kod çözücü yaptım ve ilk modelin değerini 0 olarak değiştirdim. Bu değişikliklerden sonra, rakam yazarken model değişmiyor. Niye ya? Nasıl uygulanır?

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 kod çözümü, dizenin içindeki değer bir sayı olsa da, Json değeri bir dize olduğu için çalışmaz. Örneğin, Json değeri şöyle görünür:

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

Elm Json Kod çözme fonksiyonları

çok sıkı, bu yüzden onlar sadece bir dize "42" göreceğiz. Bu dizenin iç kısmını bir sayı olarak ayrıştıran bir kod çözücü oluşturmak için bir adım daha ileri gitmelisiniz - kullanıcı sayısal olmayan bir şey yazdığında başarısız olabilecek bir eylem.

Bunun için dize değerinin nasıl çözüleceğini bildiğinden, başlangıç ​​olarak Html.Events.targetValue kod çözücüsünü kullanmaya başlayabiliriz. Daha sonra bu dizgenin değerini çıkarmak ve üzerinde hareket etmek için Json.Decode.andThen'u geçeriz.

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 kullanımı ve fail geri Decoder Int türüne içine değerini orada haritaya vardır.