Wiring Up Events With Dynamic Singletons

In some webapps, it's possible to have singleton objects that get instantiated once but initialized often. For instance (assume jQuery):

(function(window){
    window.MyNamespace = window.MyNamespace || {};
    var MySingleton = MyNamespace.MySingleton = {
        init: function() {
            //init code
        }
    }
    MySingleton.init(); //init on load
})(window);

The above code adds a singleton to your global namespace (which can be referenced by MyNamespace.MySingleton elsewhere in your code). A lot of times, in the init() function, event binding takes place:

init: function() {
    this.elem = $('#myelem');

    //wire events to this specific element
    this.elem
        .on('click', '.myclass1', this.handleClick)
        .on('change', '.myclass2', this.handleChange)
        //etc
    ;

    //wire events to doc, like triggered custom events
    $(document)
        .on('customevent', this.handleCustomEvent)
        //etc
    ;
}

This is fine if your objects main element sticks around in the DOM and your singleton is not re-init-ed. But what if you have a webapp that dynamically loads your HTML, replacing whatever was there before? Your DOM elements will successfully rebind (assuming you have fresh DOM elements), but your document events will get re-bound, meaning they will react an increasing number of times as users flip through your app.

Handling this is simple: create a hasBound property on your singleton (simplified example):

var MySingleton = {
    hasBound: false
    , init: function() {
        // [ DOM wireup ]

        if (!this.hasBound) {
            // [ document wireup ]
            this.hasBound = true;
        }
    }
 }

Now you can safely re-init your singleton without worrying about multi-binding your events!