3

我正在使用卤素来控制我的应用程序的菜单系统，我想知道如何“销毁”卤素组件。现在，我有一个函数可以在具有特定 ID 的 div 上创建子菜单组件。在应用程序的整个生命周期中，子菜单可能会被多次访问，因此目前每当visitSubMenu调用该函数时都会创建组件的多个实例。

import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)

visitSubMenu = do
  elem <- HA.selectElement "#submenu"
  case elem of
    (Just element) -> do
      liftEff $ HA.runHalogenAff do
        io <- runUI subMenuComponent unit element
        -- other code using component io...

理想情况下，我希望在用户完成子菜单中的工作后删除子菜单组件（即删除注入#submenu 的HTML，进行其他清理）。这样的事情可能吗？我意识到我可以在应用程序启动时只设置一次组件，并在应用程序的整个生命周期中保持它的活动状态，但如果我只在需要时设置它似乎更好。

我怀疑这是正确的做法，但我最初的想法是我可以创建一个生命周期组件，当我想销毁它时，我可以发送一个Finalize查询，然后手动从 DOM 中删除父元素。

4

1 回答 1

1

最后，我找到的唯一解决方案是向组件发送“清理”查询，然后删除卤素组件的根 DOM 元素。

FFI

exports.removeElementById = function(id) {
  return function() {
    var e = document.getElementById(id);
    if (e) e.remove();  
  }
}

卤素组件模块

foreign import removeElementById :: String -> Eff (dom :: DOM | e) Unit

removeSelf :: forall e. Aff (dom :: DOM | e) Unit
removeSelf = liftEff $ removeElementById componentId

componentId :: String
componentId = "unique-id-for-component"

render :: State -> H.ComponentHTML Query
render state = HH.div [HP.id_ componentId] []

这样我就可以removeSelf在我用完该组件时调用。

于 2017-05-02T01:51:59.960 回答