Elmのselectでレコードの値を変更

Question

簡単なことをしようとしますが、コードを理解するのは難しいです。 - ユーザーが月を変更し、それが動的にこの例 ではコスト（費用=月* 10）を変更していますどちらか - またはユーザーが提出し、それがお送り ： は、私は、このモデルで動作するように2つの方法があり、このレコード

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

を仮定します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を処理する必要があります。

まず、月ドロップダウンの変更に使用できるメッセージを定義しましょう。エルム-0.18

type Msg 
    = Submit 
    | MonthChanged Int 

に更新

私たちは、その後、onイベントハンドラにMonthChangedを組み込む必要があります。これはJsonデコーダで行われますが、オプションの文字列値を整数に変換するJsonデコーダが必要なので、on "change"ハンドラを定義するにはtargetValueIntParseからelm-community/html-extraまでを使用しましょう。あなたのselectコードは次のようになります。

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

最後に、あなたのupdate機能は、モデル内のmonthとcost値を設定する必要があります。あなたのcase文に以下を追加することでこれを行うことができます。

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

私はハムは大丈夫