Unable to destroy knockout binding (MetroJS) when navigate to other tabs

Question

I am using typescript and Knockout. In my example, I can create tiles and set transactions using kendo custom editor such as fade in fade out or carousel. Based on the timer set for the tile, data will be displayed. However, when I navigate to other tabs, the timer event tries to find tile data which is no longer available, results in throwing an error. I want to ensure when navigated to other tabs, all the tiles having transaction events must be destroyed or unbind. I have tried using ko.utils.domNodeDisposal.addDisposeCallback(element, function () but it never gets called.

 init: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {

        tileState.editableTileInit(element, valueAccessor, viewModel);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            console.log("I have been called");
        });
    },
    update: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {

        tileState.editableTileUpdate(element, valueAccessor, viewModel);
    }

init method will create tiles

if (viewModel.editMode() === true) LiveTiles.setupClickHandler(element, viewModel, true);

var sub = viewModel.editMode.subscribe(x => LiveTiles.setupClickHandler(element, viewModel, x));

ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
    sub.dispose();
    TileEditor.destroyEditor(element, viewModel);
    LiveTiles.destroyTile(element, viewModel);
});

update method will update the tiles if the user updates the tile at runtime.

 TileEditor.destroyEditor(element, viewModel);
    LiveTiles.createTile(element, viewModel);
    if (LiveTiles.shouldRecreateClickHandler(viewModel) === true) {
        LiveTiles.setupClickHandler(element, viewModel, viewModel.editMode());
    }

Tile window

Error when navigated to other tabs

Answer 1

This piece of code is needed to be called inside dispose in required .ts file. So whenever user navigate, dispose method will be called and below code will ensure metrojs css will be removed.

$('.live-tile')['liveTile']("destroy", true);

Answer 2

If you want to know when the user has switched to another tab (in general, out of the window), you can catch the blur event on window:

$(window).blur(() => console.log("window.blur"));