3

如何在键盘输入示例中取消订阅除 HandleKey 之外的其他操作的键盘事件 ？（问题与 Halogen 2.0.1 版和 purescript 0.11.4 版有关。）

在示例中，输入/返回有效。我有一组元素可以通过按下关闭按钮用鼠标折叠，关闭操作会处理它。此外，输入/返回可用于折叠元素，它可以正常工作。

Open next -> do
  st <- H.get
  if not st.open
    then do
      H.modify (_ { open = true })
      eval (H.action Init)
    else pure unit
  pure next

Close next -> do
  H.modify (_ { open = false })
  st <- H.get
  case st.unsubscribe of
    Nothing -> pure unit
    -- Just smth -> H.liftAff smth
    Just _ -> H.modify (_ { unsubscribe = Nothing}) -- H.liftAff us
  pure next

Init next -> do
  H.modify (_ { open = true})
  document <- H.liftEff $ DOM.window >>= DOM.document <#> DOM.htmlDocumentToDocument
  H.subscribe $ ES.eventSource'
    (K.onKeyUp document)
    (Just <<< H.request <<< HandleKey)
  -- H.modify (_ { unsubscribe = ??? })
  pure next

问题是当我用鼠标关闭（折叠）元素时，事件侦听器没有被删除（没有完成）并且它仍然存在。当我重新打开元素时，上面的代码将建立第二个（第三个、第四个等）侦听器，然后每次按键都会被处理多次。

我正在考虑创建一个键盘事件，但在这里听起来不正确。

所以问题是：

  • 如何检查是否已经有键盘监听器？
  • 然后如何在 Close 动作中停止它？
  • 或者是否可以制作 Done SubscribeStatus 并将其发送到 Close -action 的键盘侦听器？

进一步的问题：

  • 例子有在unsubscribe状态。如何使用它？
  • （我试图在 Init 动作和 Close 动作中放入一些东西，但这纯粹是猜测。）

后期编辑：这似乎与有关动态附加事件侦听器的问题有关，另请参见this、this和this。

其中一个答案说，只有通过使用状态才能了解动态处理程序，这对我的问题起到了作用。无论如何，我认为这里所说的问题仍然存在（如何使用卤素删除处理程序，特别是关于示例中的取消订阅字段 - 它是否有用？）

4

1 回答 1

3

我花了一些时间来理解 eventSource 的签名，但这里有一个可能有助于澄清发生了什么的细分。

这才是真正的签名...

eventSource' :: forall f m a eff. MonadAff (avar :: AVAR | eff) m =>
  ((a -> Eff (avar :: AVAR | eff) Unit) -> Eff (avar :: AVAR | eff) (Eff (avar :: AVAR | eff) Unit)) ->
  (a -> Maybe (f SubscribeStatus)) ->
  EventSource f m

如果我们使用一种伪代码来命名签名的组件......

type Callback a = (a -> Eff (avar :: AVAR | eff) Unit)
type MaybeQuery a = (a -> Maybe (f SubscribeStatus))
type RemoveEventListener = (Eff (avar :: AVAR | eff) Unit)

我们得到...

eventSource' :: forall f m a eff.
  (Callback a -> Eff (avar :: AVAR | eff) RemoveEventListener) ->
  MaybeQuery a ->
  EventSource f m

我认为您缺少的部分是 RemoveEventListener 部分。这是 HTMLDocument 上的 onMouseUp 的示例 EventSource，它不使用外部函数接口 (FFI)，如您引用的示例。

import DOM.Event.Types as DET
import DOM.Event.EventTarget as DEET
import DOM.HTML.Event.EventTypes as EventTypes

onMouseUp :: forall e
   . DHT.HTMLDocument
  -> (DET.Event -> Eff (CompEffects e) Unit)
  -> Eff (CompEffects e) (Eff (CompEffects e) Unit)
onMouseUp doc callback = do
  let eventTarget = (DHT.htmlDocumentToEventTarget doc)

  -- Create an EventListener that will log a message
  -- and pass the event to the callback
  let listener =
        DEET.eventListener (\event -> do
          log "mouseUp"
          callback event
        )

  -- Add the EventListener to the
  -- document so it will fire on mouseup
  DEET.addEventListener
    EventTypes.mouseup
    listener true eventTarget

  -- Return the function that will later 
  -- remove the event listener
  pure $ DEET.removeEventListener
    EventTypes.mouseup
    listener true eventTarget

所以回调会得到a事件（在这种情况下是一个通用的Event）。请注意，我们必须创建对侦听器的引用，因此我们可以将相同的引用传递给 addEventListener 作为 removeEventListener（函数引用就像一个 id 来确定删除哪个侦听器函数）。

MaybeQuery 函数也将传递a事件，因此 Halogen 可以执行查询，您可以决定是否应该继续侦听事件。该查询将需要像这样构造......

data YourQuery =
  | HandleEvent Event (SubscribeStatus -> a)

eval (HandleEvent event reply) =
  -- Decided if you want to keep listening
  -- or now.

  -- Keep listening...
  -- pure $ reply (H.Listening)

  -- Stop listening.  Halogen will call the removeEventListener
  -- function you returned from onMouseUp earlier
  -- pure $ reply (H.Done)

并且只是展示如何订阅 EventSource...

import DOM.HTML.Window as Win
import Halogen.Query.EventSource as HES

document <- H.liftEff $ (window >>= Win.document)
H.subscribe $ HES.eventSource'
  (onMouseUp document)
  (Just <<< H.request <<< HandleEvent)
于 2017-06-08T20:31:48.670 回答