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

Question

我想就如何塑造模型以使其适合table/form获得专家意见。

我尝试了很多，但卡住了。

这是我的模型：

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
}

我的观点是表格和 table 的混合体。如果我单击一个编辑按钮，每行 table/form 应该是 editable，每行都应该有。

您将如何设计模型以及您将如何应对 table/form 中的变化？

谢谢...: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 }

希望我已经设法阐明了这个想法。

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

How To Structure A Model So It Can Be Turned Into A Dynamic Form Easily

elm