Question

When should destroy be called? Does it ever get called automatically by YUI lifecycle? Does the page unload cause the YUI lifecycle to call destroy on all objects created during the page processing? I have been working under the assumption that I need to make all my own calls to destroy but that gets hairy when ajax calls replace sections of code that I had progressively enhanced. For example:

<div id="replaceMe">
  <table>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </table>
  <script>
    YUI().use('my-lib', function(Y) {
      Y.mypackage.enhanceTable("replaceMe");
    });
  <script>
</div>

The my-lib module basically adds a click handler and mouseover for each row:

YUI.add('my-lib', function(Y) { 
    function EnhancedTable(config) {
        EnhancedTable.superclass.constructor.apply(this, arguments);
    }
    EnhancedTable.NAME = "enhanced-table";
    EnhancedTable.ATTRS = {
        containerId : {},
        onClickHandler : {},
        onMouseoverHandler : {},
        onMouseoutHandler : {}
    };
    Y.extend(EnhancedTable, Y.Base, {
        _click : function(e) {
            //... submit action
        },
        destructor : function() {
            var onClickHandler = this.get("onClickHandler"),
            onMouseoverHandler = this.get("onMouseoverHandler"),
            onMouseoutHandler = this.get("onMouseoutHandler");

            onClickHandler && onClickHandler.detach();
            onMouseoverHandler && onMouseoverHandler.detach();
            onMouseoutHandler && onMouseoutHandler.detach();
        },
        initializer : function(config) {
            var container = Y.one("[id=" + this.get("containerId") + "]");

            this.set("container", container);
            this.set("onMouseoverHandler", container.delegate("mouseover",
                    this._mouseover, "tr", this ));
            this.set("onMouseoutHandler", container.delegate("mouseout",
                    this._mouseout, "tr", this ));
            this.set("onClickHandler", container.delegate("click", 
                    this._click, "tr", this ));
        },
        _mouseout : function(e) {
            e.currentTarget.removeClass("indicated");
        },
        _mouseover : function(e) {
            e.currentTarget.addClass("indicated");
        }
    });

    Y.namespace("mypackage");
    Y.mypackage.enhanceTable = function(containerId) {
        var enhancedTable new EnhancedTable({containerId:containerId});
    };
}, '0.0.1', {
    requires : [ 'base', 'node' ]
});

The click handler would submit a request back to my application that would change the page. Do I need to remember all the enhancedTable objects and have an onunload handler call the destroy method of each? Or does the YUI framework take care of this?

The last part of this quesiton is, I also have code outside of this that replaces the whole table by replacing the content of the <div id="replaceMe">. In doing so, the script would get re-run and augment the new <table> with a new EnhancedTable. Do I need to remember the old table, and destroy it before the new table clobbers it?

Answer 1

Instead of setting handlers as attributes I’d store them all in an array like this:

this._handlers = [ 
    container.delegate("mouseover", this._mouseover, "tr", this ),
    container.delegate("mouseout", this._mouseout, "tr", this ),
    container.delegate("click", this._click, "tr", this )
];

Then add a destructor method that does the following

destructor : function() {
    new Y.EventTarget(this._handlers).detach();
}

It accomplishes the same thing but with way less work on your part!

Ideally instead of running this against each table you’d attach all your delegates to #replaceMe so that it wouldn’t need to be recreated each time you changed the content, no matter where that happened from.

YUI won’t automatically call .destroy() for you on unload, it will clean up DOM subs though. The above is extra credit that’s really only necessary if you are going to be destroying the object yourself.