2

相对的 Haskell 和 reflex noob 在这里。决定用一个真实的应用程序来弄湿我的脚。

一旦用户在textInput.

代码在 GHCJS 中编译，但是一旦我打开网页，它就会显示为空白。如果我删除标记为有问题的行（这会创建更新事件），它可以正常工作（即从清除按钮设置记录eClient以及从清除按钮设置记录）。

data Client = Client
        { _clientName :: Text
        , _contacts :: [Text] -- TODO make a new type for this
        , _balance :: Int -- this is calculated
        , _notes :: [Text] -- free text notes, might come in handy
        } deriving (Show, Eq)

updateFieldFromTextInput :: Reflex t =>
                            (Client -> T.Text -> Client) ->
                            Dynamic t Client ->
                            Event t T.Text ->
                            Event t Client
updateFieldFromTextInput setter dynClient evInput = attachPromptlyDynWith setter dynClient evInput

-- the input event is the one to set a client on the widget
-- the output event is when a client is saved
clientEditWidget :: MonadWidget t m => Event t Client -> m (Event t Client)
clientEditWidget eClient = mdo
  (editClient, eSaveButton) <- elClass "div" "client-edit" $ mdo

    -- fires an Event t Client when the input field is changed
    let eNameInput = (nameInput ^. textInput_input)
        nameSetter = flip (clientName .~)
        eNameUpdate = updateFieldFromTextInput nameSetter editClient eNameInput
        eClear = mkClient "" <$ eClearButton
        eClientReplaced = leftmost [eClient, eClear]
        eClientModified = leftmost [eNameUpdate]

    -- the currently edited client
    -- using eClientModified causes a blank screen
    -- editClient <- holdDyn (mkClient "") eClientModified
    editClient <- holdDyn (mkClient "") eClientReplaced

    -- lay out the widgets
    text "edit client"
    nameInput <- textInput $
                 def & setValue .~
                 ((view clientName) <$> eClientReplaced)

    contactsInput <- textArea $
                     def & setValue .~
                     ((T.concat . view contacts) <$> eClientReplaced)
    eSaveButton <- button "Save"
    eClearButton <- button "Clear"
    dynText =<< holdDyn "updated client will appear here" (T.pack . show <$> eClientModified)
    return (editClient, eSaveButton)
  return $ tagPromptlyDyn editClient eSaveButton

编辑：我想我可能会在某处引入无限循环，所以尝试了几件事：

  • 不要setEvent将输入字段和textInput_input事件连接到相同的Dynamic. 这没有帮助
  • 设置setValue为eClient而不是eUpdatedClient- 这是Event Client我们从外部接收的（例如，当单击表中的一行时）。没有帮助。
  • 从而不是再次触发Dynamic更新以避免潜在的循环（尽管我认为这里不是这种情况。没有帮助。textInput_keypresstextInput_input

不过，无限循环很可能是问题所在。

编辑：添加了另一个dynText，表明该事件eClientModified触发了一个非常好的Client. 因此，它确实是在更新editClientDynamic 时失败了。

4

1 回答 1

2

在文档中找到了我的问题的原因tagDyn，最终：“另外，这意味着输出事件可能不会用于直接更改输入动态，因为这意味着它的值取决于自身。在创建循环数据流时，通常tag (current d) e是首选。”

不知何故，我希望这会神奇地起作用......

因此，使用Behavior更新事件而不是Dynamic（而attachWith不是attachPromptlyDynWith）可以正常工作。

这是工作代码：

updateFieldFromTextInput :: Reflex t =>
                            (Client -> T.Text -> Client) ->
                            Behavior t Client ->
                            Event t T.Text ->
                            Event t Client
updateFieldFromTextInput setter bClient evInput = attachWith setter bClient evInput

-- the input event is the one to set a client on the widget
-- the output event is when a client is saved
clientEditWidget :: MonadWidget t m => Event t Client -> m (Event t Client)
clientEditWidget eClient = mdo
  (editClient, eSaveButton) <- elClass "div" "client-edit" $ mdo

    -- fires an Event t Client when the input field is changed
    let eNameInput = (nameInput ^. textInput_input)
        nameSetter = flip (clientName .~)
        eNameUpdate = updateFieldFromTextInput nameSetter (current editClient) eNameInput
        eClear = mkClient "" <$ eClearButton
        eClientReplaced = leftmost [eClient, eClear]
        eClientModified = leftmost [eNameUpdate]

    -- the currently edited client
    editClient <- holdDyn (mkClient "") eClientModified

    -- lay out the widgets
    text "edit client"
    nameInput <- textInput $
                 def & setValue .~
                 ((view clientName) <$> eClientReplaced)

    contactsInput <- textArea $
                     def & setValue .~
                     ((T.concat . view contacts) <$> eClientReplaced)
    eSaveButton <- button "Save"
    eClearButton <- button "Clear"
    dynText =<< holdDyn "updated client will appear here" (T.pack . show <$> eClientModified)
    return (editClient, eSaveButton)
  return $ tagPromptlyDyn editClient eSaveButton
于 2018-02-16T08:34:23.830 回答