Binding lifecycle called for the removed views on navigating to any route : Durandal

Question

In my Durandal application, I have configured several parent routers and for some of it , there are child routers configured. The problem is, when the user navigates between different parent pages or the child pages, then binding lifecycle of the previous route is also getting triggered along with the binding lifecycle of the existing route.

The child routers are configured inside the parent view models and the parent routers are configured in shell.ts as mentioned in Durandal docs.

Provided, in my shell.ts, in the router data bind property, i have given the attribute cacheViews as false and alwaysTriggerAttach as true .

<div data-bind="router:{cacheViews: false, alwaysTriggerAttach: true}"></div>

The expected result is, the binding lifecycle of the previous route should not be loaded when the current route is loading. For example if we are navigating to #P1/C1 from #P2 , then the binding lifecycle of #P2 should not get loaded.

Answer 1

Without getting enough details, it's hard to answer this question correctly. But looks like domElements which are removed from DOM still has eventHandlers active on them. Have you looked into http://durandaljs.com/documentation/api#class/Router/method/reset and tried using it?

Default behaviour in knockout is even if DOM elements are removed from dom, it still leaves eventHandlers attached, in active state and doesn't remove them by default.

In your router bindingHandler, inside init method, try below and see if it fixes

   ko.utils.domeNodeDisposal.addDisposeCallback(element,()=>{
   //do whatever you want here. like cleanup //reset(), etc
   })

https://knockoutjs.com/documentation/custom-bindings-disposal.html