Elm langのselect（dropdown）タグの使い方

Question

次のコードでelmアプリケーション内の単純なドロップダウンをレンダリングしたいのですが、期待どおりに機能しません。可能であれば、文字列の使用を避けたいと思います。

Elmでドロップダウンを使用する最も良い方法は何ですか？私はまだ例を見いださなかった。

import Html exposing (..) 
import Html.App exposing (beginnerProgram) 
import Html.Events exposing (..) 
import Html.Attributes exposing (..) 
import Json.Decode 

main = 
    beginnerProgram 
    { model = initialModel 
    , view = view 
    , update = update 
    } 

initialModel = 
    { role = None 
    } 

type Role 
    = None 
    | Admin 
    | User 

type alias Model = 
    { role: Role 
    } 

type Msg 
    = SelectRole Role 


update msg model = 
    case msg of 
    SelectRole role -> 
     { model | role = role } 


view : Model -> Html Msg 
view model = 
    div 
    [] 
    [ select 
     [ ] 
     [ viewOption None 
     , viewOption Admin 
     , viewOption User 
     ] 
    , pre [] [ text <| toString model ] 
    ] 



viewOption : Role -> Html Msg 
viewOption role = 
    option 
    [ onClick (SelectRole role) ] 
    [ text <| toString role ] 

Answer 1

onClickハンドラは本当にoption要素では動作しません。代わりに、changeイベントをキャプチャし、JSON targetValueを見て選択内容を確認します。

私が最初にonClickハンドラを削除し、代わりにoptionタグのvalue属性セットになります。今、あなたはイベントのtargetValue文字列を取り、Roleに変換することができJSONのデコーダが必要になります

viewOption : Role -> Html Msg 
viewOption role = 
    option 
    [ value <| toString role ] 
    [ text <| toString role ] 

を：

targetValueRoleDecoder : Json.Decode.Decoder Role 
targetValueRoleDecoder = 
    targetValue `Json.Decode.andThen` \val -> 
    case val of 
     "Admin" -> Json.Decode.succeed Admin 
     "User" -> Json.Decode.succeed User 
     "None" -> Json.Decode.succeed None 
     _ -> Json.Decode.fail ("Invalid Role: " ++ val) 

これで、追加する必要があります。selectchangeイベントハンドラ：

[ select 
     [ on "change" (Json.Decode.map SelectRole targetValueRoleDecoder) 
     ] 
     [ viewOption None 
     , viewOption Admin 
     , viewOption User 
     ] 

我々は、文字列に頼ら持っているという事実は、単に有効な労働組合のタイプにDOMイベントからの値を変換することの成果物です。あなたはまだユニオンタイプとしてRoleを保持したいと思うでしょう。 Elmはあらゆる種類の自動String-to-Union型関数をサポートしていないので、各ユニオン型を対象としたJSONデコーダを作成するだけです。