Search code examples
javascriptjquerybackbone.jsmarionette

What view events are triggered when a view is removed from a region?


I am currently using Marionette 2.4.1.

Within view A, if I remove view B from the region belonging to view A, what events are triggered on view B on emptying the region?

I know on view B, onDestroy and onBeforeDestroy are invoked however I am wondering what events are triggered if that region includes {preventDestroy: true}? If I use that, onDestroy and onBeforeDestroy are not called but I can't figure out what event is triggered on view B. It seems like there are none.


Solution

  • Let's say your LayoutView is called view A, it has a region. In that region an ItemView called B is shown. When A empties it's region, events will be fired on view B (before:destroy and destroy) - this happens regardless if view B was shown in it's region with preventDestroy: true or without.

    preventDestroy: true is used when you want to show one view in a region, then another in the same region without destroying the previous view. So, in this example:


    1. Show view B in a region.
    2. Show (without preventDestroy) a new view (C) in the same region - will cause view B to be destroyed and to fire destroy events.

    1. Show view B in a region.
    2. Show (using preventDestroy) a new view (C) in the same region - will not cause view B to be destroyed, thus no destroy events will be fired.

    Edit

    In the first case, these events are fired on the views:

    ::: B :::  before:destroy
    ::: B :::  destroy
    ::: C :::  before:render
    ::: A :::  childview:before:render
    ::: C :::  render
    ::: A :::  childview:render
    ::: C :::  before:show
    ::: A :::  childview:before:show
    ::: C :::  before:attach
    ::: A :::  childview:before:attach
    ::: C :::  attach
    ::: A :::  childview:attach
    ::: C :::  dom:refresh
    ::: A :::  childview:dom:refresh
    ::: C :::  show
    ::: A :::  childview:show
    

    In the second case, these events are fired on the views:

    ::: C :::  before:render
    ::: A :::  childview:before:render
    ::: C :::  render
    ::: A :::  childview:render
    ::: C :::  before:show
    ::: A :::  childview:before:show
    ::: C :::  before:attach
    ::: A :::  childview:before:attach
    ::: C :::  attach
    ::: A :::  childview:attach
    ::: C :::  dom:refresh
    ::: A :::  childview:dom:refresh
    ::: C :::  show
    ::: A :::  childview:show
    

    Note that in the last case, view B doesn't fire destroy events, and no other events either.