查看多个文本区域,如何识别哪个被修改了?
View with multiple textareas, how to identify which was modified?
我正在用 Elm 制作一个包含多个 textarea
元素的简单页面。我正在努力保存数据,尤其是确定哪个 textarea
已更新。也许一个例子更好地说明了这一点
我从列表中查看了多个元素
type alias Model = { List Comment, ... }
type alias Comment = {id: Int, content: String, draftContent: String, ...}
type Event = Save Comment | SaveDraft String
-- view
model.comments
|> List.map( --iterate the list of comments and render html
div [attrubute "name" "comment"] [
textarea [onInput SaveDraft] [text comment.content],
button [onClick (Save comment)] [text "Post comment"]
]
-- update
case event of
Save comment ->
-- Replace the comment content with draft data and clear draft
SaveDraft draftText ->
-- Update the draft content with text from event
-- Which Comment is it?
基于示例我想到了将每个文本区域输入作为事件发送以更新函数并保存草稿数据的想法。
现在的问题是 onInput
只接受带有 String
参数的类型,我无法确定哪一个评论被修改了。
更改 Event
联合类型以包含注释 (SaveDraft String
--> SaveDraft Comment String
)
type Event = Save Comment | SaveDraft Comment String
-- view
model.comments
|> List.map( --iterate the list of comments and render html
div [attrubute "name" "comment"] [
textarea [onInput (SaveDraft comment.content)] [text comment.content],
button [onClick (Save comment)] [text "Post comment"]
]
柯里化导致 (SaveDraft comment.content)
具有与之前相同的 return 值
我正在用 Elm 制作一个包含多个 textarea
元素的简单页面。我正在努力保存数据,尤其是确定哪个 textarea
已更新。也许一个例子更好地说明了这一点
我从列表中查看了多个元素
type alias Model = { List Comment, ... }
type alias Comment = {id: Int, content: String, draftContent: String, ...}
type Event = Save Comment | SaveDraft String
-- view
model.comments
|> List.map( --iterate the list of comments and render html
div [attrubute "name" "comment"] [
textarea [onInput SaveDraft] [text comment.content],
button [onClick (Save comment)] [text "Post comment"]
]
-- update
case event of
Save comment ->
-- Replace the comment content with draft data and clear draft
SaveDraft draftText ->
-- Update the draft content with text from event
-- Which Comment is it?
基于示例
现在的问题是 onInput
只接受带有 String
参数的类型,我无法确定哪一个评论被修改了。
更改 Event
联合类型以包含注释 (SaveDraft String
--> SaveDraft Comment String
)
type Event = Save Comment | SaveDraft Comment String
-- view
model.comments
|> List.map( --iterate the list of comments and render html
div [attrubute "name" "comment"] [
textarea [onInput (SaveDraft comment.content)] [text comment.content],
button [onClick (Save comment)] [text "Post comment"]
]
柯里化导致 (SaveDraft comment.content)
具有与之前相同的 return 值