使用单选按钮反映模型

Question

在this example中，最初的fontSize是Medium。这反映在字体的大小上，但中等单选按钮未被选中。有没有办法让单选按钮始终反映当前的fontSize？

Answer 1

这是你在找什么？

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 
    ] 

请注意，我将onClick更改为onInput，我认为这是对表单选择更好的做法。

顺便说一句，我倾向于把味精在放慢参数类型签名的开始，因为那是最不容易的功能管道的一部分：

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

Answer 2

这是有问题的代码：

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 
    ] 

这是用来渲染无线电输入行：

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

有用于无线电（see the docs）一checked属性，所以它看起来你可以添加，取决于当前的字体大小？喜欢的东西：

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 
    ] 

...然后根据在view功能模型设置isChecked说法。