Any way to force the dom disposed of a view

[maxfridbe]

At the moment when i navigate to a view that has it's own bindings and navigate away. The navigate-away does not seem to cause domdisposed of that view and therefore the bindings are still active.

However when I navigate back to this view it will dispose and rebind. Is there any parameter saying please-unbind when unloaded. I dont' have sourcecaching on.

[finnsson]

I understand your problem and I'm wondering that the correct solution is. Should all (loaded) pages automatically be disposed if sourceCache is not true or should there be an additional config property that specifies that pages should be disposed? The former is more natural - but I'm trying to figure out if there might be some unwanted side effects from that solution.

[maxfridbe]

I agree with setting a property like shouldDispose to false by default to not break things for others.

[wrschneider]

Same question from me. Pager leaves the DOM from inactive templates, and the inactive view models as well. It would be great if navigation disposed the DOM for the old page and shut down any observables in view model in case of circular dependencies.

[wrschneider]

It seems like by design, Pager could not assume that it can dispose the view or view model, because the view for the route may exist inside the DOM element for the route itself, and the view model may not necessarily be managed by Pager itself.

If your usage pattern is such that you can dispose the view on navigation away, you could do something with an afterHide callback:

// maybe shut down all observables in event.page.ctx too?

// clear out reference from the node with page binding so it can be garbage collected
event.page.ctx = {};

// shut down and wipe DOM from page to be hidden- will also fire KO dispose callbacks   
var elementToDestroy = event.page.element;

$(elementToDestroy).children().each(function destroyChildElement() {
    ko.removeNode(this);
});

[wrschneider]

Another suggestion: this could work just like the Knockout "if" binding.

The "page" binding should stash the page content away in the element's domData or page object if cached, or not lazy-loaded (!sourceOnShow or sourceCache). Then with a saved copy, any afterHide event can tear down the DOM with ko.utils.emptyDomNode. Then on subsequent page view, you clone the nodes out of the stashed copy or re-fetch.

That takes care of DOM and bindings - there's still the view model reference (event.page.ctx) to clear.