Knockout & Plotly custom binding proper disposal

161 Views Asked by At

I have an application that uses Knockout and a custom binding handler for Plotly graphs. The issue I'm having is when the binding handler is disposed of, it creates a lot of detached DOM elements.

Here's the binding handler:

ko.bindingHandlers.plotly =
{
    update: function(element, valueAccessor)
    {
        let unwrapped = ko.unwrap(valueAccessor());

        Plotly.newPlot(element,
            unwrapped.def().data, unwrapped.def().layout, unwrapped.def().options);

        ko.utils.domNodeDisposal.addDisposeCallback(element,
            function ()
            {
                    Plotly.purge(element);
            }
        );
    }
};

I think the problem here is that

  1. Knockout first deletes all the DOM nodes
  2. After that executes the dispose callback
  3. Plotly.purge() expects the element to be in the state before the DOM nodes were deleted

Is there a way to get to the DOM element that's being disposed of before they have been deleted? Or am I doing something else wrong?

0

There are 0 best solutions below