用完后 "destroy" 纯脚本卤素组件的最佳方法是什么?
What's the best way to "destroy" a purescript-halogen component when you're done using it?
我正在使用卤素灯来控制我的应用程序的菜单系统,我想知道如何 "destroy" 卤素灯组件。现在,我有一个函数可以在具有特定 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.
的父元素
最后,我找到的唯一解决方案是向组件发送"Cleanup"查询,然后删除卤素组件的根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
。
我正在使用卤素灯来控制我的应用程序的菜单系统,我想知道如何 "destroy" 卤素灯组件。现在,我有一个函数可以在具有特定 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.
最后,我找到的唯一解决方案是向组件发送"Cleanup"查询,然后删除卤素组件的根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
。