2017-04-16 9 views
2

私は、アプリケーションのメニューシステムを制御するためにハロゲンを使用しています。そして、私はどのようにしてハロゲンコンポーネントを "破壊"できるのでしょうか?今、特定のIDを持つdivにサブメニューコンポーネントを作成する関数があります。アプリのライフサイクルを通して、サブメニューに複数回訪問することができるので、visitSubMenu関数が呼び出されるたびにコンポーネントの複数のインスタンスが作成されます。purescript-halogenコンポーネントを使用し終わった後に、そのコンポーネントを「破壊する」最も良い方法は何ですか?

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... 

理想的には、私は、ユーザーがサブメニューの仕事で行われる場合、サブメニュー成分が除去されたい(つまりHTMLは#submenuに注入除去され、その他のクリーンアップが起こります)。そんなことは可能でしょうか?私は、アプリケーションの開始時にコンポーネントを1回だけセットアップし、アプリの寿命を通して生き続けることができることを理解していますが、必要なときにセットアップするだけの方がいいようです。


私は、これはそれを行うための正しい方法である疑いが、私の最初の考えは、私が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を呼び出すことができます。

関連する問題