在Threepenny-gui中使用FRP和IORef

Question

我有一个在threepenny-gui（TPG）中使用IORef的小例子：

testIORef :: IORef String -> Window -> UI ()
testIORef ref window = void $ do
    return window # set title "Test IORef"

    inCell  <- UI.input
    outCell <- UI.input

    -- When value changes write to IORef
    on  UI.valueChange inCell $ \_ -> do
        inValue <- get value inCell
        liftIO $ writeIORef ref inValue    

    -- function that reads the IORef and sets the value of an element with it
    let setValue oc = do  
            newVal <- liftIO $ readIORef ref
            element oc # set value newVal

    -- When enter is pressed update the value of the output
    on UI.keydown inCell $ \c -> if (c==13) then setValue outCell else return outCell

    getBody window #+ [ column [ grid [[string "In cell :", element inCell]
                                      ,[string "Out cell:", element outCell]
                                      ]
                                , string "Cells should update while typing."
                               ]
                      ]

我试图将其更改为在TPG中使用反应性材料。 我已经从事件valueChange和keyDown做出了Behaviors：

inValue <- stepper "0" $ UI.valueChange inCell
inEnter <- stepper "0" $ fmap show $ filterE (\kc-> kc==13) $ UI.keydown inCell

但是我对如何使用这些行为将值保存到IORef或从IORef获取值感到困惑。 问题在于IORef调用将在UI monad中，因此，如果我使用它们，那么Behavior将是Behavior (UI a) ，但是它们将无法与sink 。 我知道在这种情况下，我不需要使用IORef（例如货币换算示例），但在我的实际情况下，我确实需要使用IORef。

编辑：我尝试编写自己的属性：

valueUI :: ReadWriteAttr Element (UI String) String

这样我就可以使用Behavior (UI String)设置属性：

inEnter <- stepper "0" $ fmap show $ filterE (\kc-> kc==13) $ UI.keydown inCell    
let getValue = fmap (const $ liftIO $ readIORef ref) inEnter   
element outCell # sink valueUI getValue

该代码可以编译，但是不起作用。