2

我对 Threepenny-Gui 与 StateT 的互动有疑问。考虑这个玩具程序，每次单击按钮时，都会在列表中添加一个“Hi”项：

import           Control.Monad
import           Control.Monad.State

import qualified Graphics.UI.Threepenny      as UI
import           Graphics.UI.Threepenny.Core hiding (get)

main :: IO ()
main = startGUI defaultConfig setup

setup :: Window -> UI ()
setup w = void $ do
  return w # set title "Ciao"
  buttonAndList <- mkButtonAndList
  getBody w #+ map element buttonAndList

mkButtonAndList :: UI [Element]
mkButtonAndList = do
  myButton <- UI.button # set text "Click me!"
  myList <- UI.ul
  on UI.click myButton $ \_ -> element myList #+ [UI.li # set text "Hi"]
  return [myButton, myList]

现在，我希望它打印自然数而不是“嗨”。我知道我可以使用 UI monad 是 IO 的包装器这一事实，并读/写我到目前为止在数据库中达到的数字，但是，出于教育目的，我想知道我是否可以使用StateT，或以其他方式通过 Threepenny-gui 界面访问列表的内容。

4

1 回答 1

5

StateT在这种情况下不起作用。问题是您需要计数器的状态在按钮回调的调用之间保持不变。由于回调（startGUI以及）产生UI动作，StateT使用它们运行的​​任何计算都必须是独立的，以便您可以调用runStateT和使用结果UI动作。

使用 Threepenny 保持持久状态的主要方法有两种。第一个也是最直接的方法是使用一个IORef（它只是一个存在于 中的可变变量IO）来保持计数器状态。这导致代码与使用传统事件回调 GUI 库编写的代码非常相似。

import           Data.IORef
import           Control.Monad.Trans (liftIO)

-- etc.

mkButtonAndList :: UI [Element]
mkButtonAndList = do
  myButton <- UI.button # set text "Click me!"
  myList <- UI.ul

  counter <- liftIO $ newIORef (0 :: Int) -- Mutable cell initialization.

  on UI.click myButton $ \_ -> do
    count <- liftIO $ readIORef counter -- Reads the current value.
    element myList #+ [UI.li # set text (show count)]
    lift IO $ modifyIORef counter (+1) -- Increments the counter.

  return [myButton, myList]

第二种方式是从命令式回调接口切换到由Reactive.Threepenny.

mkButtonAndList :: UI [Element]
mkButtonAndList = do
  myButton <- UI.button # set text "Click me!"
  myList <- UI.ul

  let eClick = UI.click myButton  -- Event fired by button clicks.
      eIncrement = (+1) <$ eClick -- The (+1) function is carried as event data.
  bCounter <- accumB 0 eIncrement -- Accumulates the increments into a counter.

  -- A separate event will carry the current value of the counter.
  let eCount = bCounter <@ eClick
  -- Registers a callback.
  onEvent eCount $ \count ->
    element myList #+ [UI.li # set text (show count)]

  return [myButton, myList]

go的典型用法Reactive.Threepenny是这样的：

  • 首先，您通过（或者，如果您选择的事件未包含在该模块中）获取Event来自用户的输入。在这里，“原始”输入事件是.Graphics.UI.Threepenny.EventsdomEventeClick
  • Control.Applicative然后，您使用和Reactive.Threepenny组合器按摩事件数据。在我们的示例中，我们转发eClick为eIncrement和eCount，在每种情况下设置不同的事件数据。
  • 最后，您可以通过使用事件数据构建Behavior（like bCounter）或回调（通过 using onEvent）。一个行为有点像一个可变变量，除了对它的更改是由您的事件网络以原则方式指定的，而不是通过散布在您的代码库中的任意更新。处理此处未显示的行为的有用函数是sink函数，它允许您将 DOM 中的属性绑定到行为的值。

这个问题和 Apfelmus 的回答中提供了一个额外的示例，以及对这两种方法的更多评论。

细节：在 FRP 版本中您可能关心的一件事是是否eCount会bCounter在eIncrement. 答案是该值肯定会是旧值，正如预期的那样，因为正如Reactive.Threepenny文档所述，Behavior更新和回调触发具有名义上的延迟，而其他操作不会发生这种延迟Event。

于 2014-06-10T02:34:42.057 回答