如何从记录列表中动态创建 Table 行？

Question

我的模型类型是：

type alias Model =
    {   freeSyllables : List FreeSyllable
    ,   freeSyllableInput : String
    ,   usageStartInput : Bool
    ,   usageMidInput : Bool
    ,   usageEndInput : Bool
    }

FreeSyllable 类型看起来像：

type alias FreeSyllable =
    {   syllable : String
    ,   usage : Usage
    }

用法类型具有三个布尔字段：

type alias Usage =
    {   start : Bool
    ,   mid : Bool
    ,   end : Bool
    }

我尝试将模型的 FreeSyllables-List 中的每一项渲染为 table。

我没有成功。

所以我的问题是如何使用这些列将每个模型的 "FreeSyllables" 动态呈现为适当的 html table：

音节（文本框）
开始使用（复选框）
中期使用（复选框）
结束使用（复选框）
操作（保存按钮）

Answer 1

您必须附加事件处理程序（触发 Msg），但这里是示例视图：

view : Model -> Html Msg
view model =
    table [] <|
        [ tr []
            [ th [] [ text "syllable" ]
            , th [] [ text "start" ]
            , th [] [ text "mid" ]
            , th [] [ text "end" ]
            , th [] [ text "actions" ]
            ]
        ]
            ++ (List.map viewItem model.freeSyllables)


viewItem : FreeSyllable -> Html Msg
viewItem s =
    tr []
        [ th [] [ text s.syllable ]
        , th [] [ input [ type_ "checkbox", checked s.usage.start ] [] ]
        , th [] [ input [ type_ "checkbox", checked s.usage.mid ] [] ]
        , th [] [ input [ type_ "checkbox", checked s.usage.end ] [] ]
        , th [] [ button [] [ text "save" ] ]
        ]

如何从记录列表中动态创建 Table 行？

How Can I Dynamically Create Table Rows From A List Of Records?

elm