Question

I want myproperty to be able to be accessed from other methods within Foo.

Here is the way I’m doing it now:

(function($){
  $.fn.Foo = {

    main: function(){
      return this.each(function(){  

        this.myproperty = 'abc';

        ...
        ...bind('click', 'somemethod')...
        ...

      });
    }

    somemethod: function(e){

      // access here myproperty
      alert($.fn.Foo.myproperty); 
    }

}(jQuery));

(function($){
  $.fn.extend({ Foo : $.fn.Foo.main});
}(jQuery));

and seems to work. But is this the best way to do it? Are there any other ways?

Answer 1

I think your trying to make a class? You currently are extending the jQuery library with function you can call on elements like $(“#test”).Foo();

A good start setup is: http://jsfiddle.net/VhGpe/

(function($) {
    var methods = {
        init: function(settings) {
            var options = $.extend({}, $.fn.FooMe.defaults, settings);
            $(this).data("settings", options);
            $(this).bind("click", methods.myOtherFunction);
        },
        myOtherFunction: function() {
            alert($(this).data("settings").you);
        }
    };



    $.fn.FooMe = 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.Foo');
        }
    };

    $.fn.FooMe.defaults = {
        you: "default"
    };

}(jQuery));

$("#test").FooMe({
    you: "TADAA"
});