如何构建模型以便轻松将其转换为动态形式

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 按钮设置的（或者通过失去焦点事件......随便）

这里有一个例子来说明它是如何工作的：

FreeSyllable 类型带有一个新的 editing 字段：

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

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

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 }

希望我已经设法澄清了这个想法。