2

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?

RedShift
  • 287
  • 1
  • 6
  • 17
  • Is there a specific error or reference to a line in the Plotly source on which this breaks? – user3297291 Apr 10 '17 at 09:47
  • No, Plotly.purge doesn't error out, it just doesn't do anything. All the DOM nodes that were related to Plotly become detached DOM nodes. – RedShift Apr 10 '17 at 13:07
  • how you triggering `binding handler disposal` ? – Ja9ad335h Apr 10 '17 at 15:02
  • Make sure you're not storing (debug) references to the elements outside of the binding handler... (I think) garbage collection won't be able to fully dispose the elements if they're still referenced in code. – user3297291 Apr 10 '17 at 15:16
  • also move your `ko.utils.domNodeDisposal.addDisposeCallback` handler to `init` section since you don't want to attach it on every `update` call. – Ja9ad335h Apr 10 '17 at 16:06

0 Answers0