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的每个项目渲染到一个表格中。

我没有成功。

所以我的问题是我如何使用这些列动态地将每个模型的“FreeSyllables”渲染到一个合适的html表中：

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

Answer 1

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

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" ] ]
        ]

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

1 个答案: