我希望对如何塑造模型以使其适合表格/表格有专家意见。
我尝试了很多，但卡住了。
这是我的模特：
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
答案 0 :(得分：1)
灵感可以从Todo MVC example
获取我们的想法是在editing : Bool条记录中有一个FreeSyllable字段，并且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 }
：
if "%~d1"=="W:"
希望我能够澄清这个想法。