jQuery Plugin scope advice

Question

I am currently writing my first jQuery plugin and I am struggling to find an appropriate way to structure the code. I have read the documentation on the jquery website as well as the source code for other plugins, but can't seem to find an agreed way of doing it or one that addresses the issue I am having.

The plugin adds some text processing to a text input element to format text as a date.

The example below binds two events to the element. The issue I have is how can I access the element itself from the _processText function. In the example I use $(this), but this gives me the object, not the element so I can't set the value on it or trigger an event. The only way I have found to do it is to pass the element into the function as a parameter directly in the bind event, but I don't think that look correct.

Any help greatly received.

(function($) {


    var methods = {
        init : function( options ) {
            return this.each(function() {


                // Process the entered text and convert
                // into a formatted date
                $(this).bind('blur', function(event){
                    methods._processText($(this).val());
                });


                // Custom event to trigger when invalid text
                // is entered
                $(this).bind('invalid', function(event) {
                    alert("Invalid");
                });


            });
        },

        _processText: function(txt) {

            // Sudo code
            if (txt.isValid()) {
                $(this).val(txt)
            } else {
                $(this).trigger("invalid");
            }

        }

    };






    // boilerplate
    $.fn.datefield = function( method ) {
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.DateField' );
        }
    };
})(jQuery);

Answer 1

May I suggest using the jQuery Boilerplate? It's a pretty solid foundation for most plugin development, especially if you're unfamiliar with the difficulties of scope.

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.

    // window and document are passed through as local variables rather than globals
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method which merges the contents of two or 
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and the options via the instance, 
        // e.g., this.element and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

http://jqueryboilerplate.com/

Answer 2

Use this:

methods._processText.call(this, $(this).val());

Then inside the _processText method, this will point to the jQuery object.

Reference: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call