2017-04-16 92 views
2

我使用鹵素來控制我的應用程序的菜單系統,我想知道如何「銷燬」鹵素組件。現在,我有一個函數可以在具有特定ID的div上創建子菜單組件。在應用程序的整個生命週期中,可以多次訪問子菜單,因此當調用visitSubMenu函數時,當前會創建該組件的多個實例。完成使用後,「摧毀」purescript-鹵素組分的最佳方法是什麼?

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被移除,其他清理髮生)進行要刪除的子菜單部件。這種事情可能嗎?我意識到我可以在應用程序的開始時只安裝一次組件,並在應用程序的整個生命週期中保持活動狀態,但如果我只在需要時進行設置,對我來說似乎更好。


我懷疑這是做正確的方式,但我最初的想法是,我可以創造一個lifecycleComponent,當我要消滅它,我可以發送Finalize查詢,然後手動刪除父元素來自DOM。

回答

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當我使用的組件完成。

相關問題