Les boutons radio correspondent au modèle

Question

En this example, le fontSize initial est Medium. Ceci est reflété dans la taille de la police, mais le bouton radio moyen n'est pas sélectionné. Y at-il un moyen de rendre le bouton radio toujours refléter le courant fontSize?

Answer 1

Est-ce ce que vous cherchiez?

view : Model -> Html Msg 
view model = 
    div [] 
    [ fieldset [] 
     [ radio "Small" (model.fontSize == Small) (SwitchTo Small) 
     , radio "Medium"(model.fontSize == Medium) (SwitchTo Medium) 
     , radio "Large" (model.fontSize == Large) (SwitchTo Large) 
     ] 
    , Markdown.toHtml [ sizeToStyle model.fontSize ] model.content 
    ] 


radio : String -> Bool > msg -> Html msg 
radio value isChecked msg = 
    label 
    [ style [("padding", "20px")] 
    ] 
    [ input [ type_ "radio", name "font-size", onInput msg, checked isChecked ] [] 
    , text value 
    ] 

Notez que j'ai changé onClick en onInput, ce qui me semble être une meilleure pratique pour les sélections de formulaires.

En aparté, je tends à mettre le msg paramter au début de la signature de type que c'est le moins susceptible de faire partie d'un pipeline de fonctions:

radio : msg -> Bool -> String -> Html msg 

Answer 2

C'est le code en question:

view : Model -> Html Msg 
view model = 
    div [] 
    [ fieldset [] 
     [ radio "Small" (SwitchTo Small) 
     , radio "Medium" (SwitchTo Medium) 
     , radio "Large" (SwitchTo Large) 
     ] 
    , Markdown.toHtml [ sizeToStyle model.fontSize ] model.content 
    ] 


radio : String -> msg -> Html msg 
radio value msg = 
    label 
    [ style [("padding", "20px")] 
    ] 
    [ input [ type_ "radio", name "font-size", onClick msg ] [] 
    , text value 
    ] 

Et ceci est la ligne utilisée pour rendre une entrée radio:

input [ type_ "radio", name "font-size", onClick msg ] [] 

Il y a un attribut checked pour les radios (see the docs), il semble vous pourriez ajouter cela en fonction de la taille de la police actuelle? Quelque chose comme:

radio : String -> Bool -> msg -> Html msg 
radio value isChecked msg = 
    label 
    [ style [("padding", "20px")] 
    ] 
    [ input [ type_ "radio", name "font-size", checked isChecked, onClick msg ] [] 
    , text value 
    ] 

... puis définissez l'argument isChecked selon le modèle dans la fonction view.