如何构建模型，使其易于转换为动态形式

Question

我想要一个专家的意见，关于如何塑造一个模型，使其适合表格/表单。

我试了很多，但还是卡住了。

这是我的模型：

type alias Model =
{   freeSyllables : List FreeSyllable
,   addFreeSyllableInput : String
,   addUsageStartInput : Bool
,   addUsageMidInput : Bool
,   addUsageEndInput : Bool
}

它是由以下元素组成的：

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

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

我的视图是表格和表格的混合体。如果我单击编辑按钮，表格/表单应该是每行可编辑的，每一行都应该有编辑按钮。

您将如何设计模型，以及如何对表/表单中的更改做出反应？

谢谢... :D

Answer 1

灵感可以从Todo MVC example中获得

这个想法是在FreeSyllable记录中有一个editing : Bool字段，并根据editing的值显示input或text (或其他值)。editing的值可以通过单击edit或submit按钮来设置(或通过失去焦点事件...管它呢)

这里有一个例子，只是为了说明它是如何工作的：

具有新editing字段的FreeSyllable类型：

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

显示input或text并发送UpdateSyllable和EditingSyllable事件的view：

view model =
    div []
        [ ul [] (List.indexedMap viewSyllable model.freeSyllables)
        ]

viewSyllable index freeSyllable =
    li []
        [ if freeSyllable.editing then
            div []
                [ input [ onInput (UpdateSyllable index), value freeSyllable.syllable ] []
                , a [ onClick (EditingSyllable index False) ] [ text "submit" ]
                ]
          else
            div []
                [ text freeSyllable.syllable
                , a [ onClick (EditingSyllable index True) ] [ text "edit" ]
                ]
        ]

更新模型的update：

type Msg
    = UpdateSyllable Int String
    | EditingSyllable Int Bool


update msg model =
    case msg of
        UpdateSyllable index syllable ->
            let
                updateSyllable idx freeSyllable =
                    if idx == index then
                        { freeSyllable | syllable = syllable }
                    else
                        freeSyllable
            in
                { model | freeSyllables = List.indexedMap updateSyllable model.freeSyllables }

        EditingSyllable index editing ->
            let
                updateSyllable idx freeSyllable =
                    if idx == index then
                        { freeSyllable | editing = editing }
                    else
                        freeSyllable
            in
                { model | freeSyllables = List.indexedMap updateSyllable model.freeSyllables }

希望我已经弄清楚了这一点。