Disposal Logic

In a typical Footwork application, DOM elements are dynamically added and removed, for example using the template binding or via control-flow bindings (if, ifnot, with, and foreach). When creating a custom binding, it is often desirable to add clean-up logic that runs when an element associated with your custom binding is removed by Footwork.

Registering a callback

To register a function to run when a node is removed, you can call fw.utils.domNodeDisposal.addDisposeCallback(node, callback). As an example, suppose you create a custom binding to instantiate a widget. When the element with the binding is removed, you may want to call the destroy method of the widget:

fw.bindingHandlers.myWidget = {
  init: function(element, valueAccessor) {
    var options = fw.unwrap(valueAccessor()),
        $el = $(element);

    $el.myWidget(options);

    fw.utils.domNodeDisposal.addDisposeCallback(element, function() {
      // This will be called when the element is removed by Footwork or
      // if some other part of your code calls fw.removeNode(element)
      $el.myWidget("destroy");
    });
  }
};

Overriding the clean-up

When removing an element, Footwork runs logic to clean up any data associated with the element. As part of this logic, Footwork calls jQuery's cleanData method if jQuery is loaded in your page. In advanced scenarios, you may want to prevent or customize how this data is removed in your application. Footwork exposes a function, fw.utils.domNodeDisposal.cleanExternalData(node), that can be overridden to support custom logic. For example, to prevent cleanData from being called, an empty function could be used to replace the standard cleanExternalData implementation:

fw.utils.domNodeDisposal.cleanExternalData = function () {
  // Do nothing. Now any jQuery data associated with elements will
  // not be cleaned up when the elements are removed from the DOM.
};