Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Coffeescript jQuery Plugin Class Template
# A class-based template for jQuery plugins in Coffeescript
#
# $('.target').myPlugin({ paramA: 'not-foo' });
# $('.target').myPlugin('myMethod', 'Hello, world');
#
# Check out Alan Hogan's original jQuery plugin template:
# https://github.com/alanhogan/Coffeescript-jQuery-Plugin-Template
#
(($, window) ->
# Define the plugin class
class MyPlugin
defaults:
paramA: 'foo'
paramB: 'bar'
constructor: (el, options) ->
@options = $.extend({}, @defaults, options)
@$el = $(el)
# Additional plugin methods go here
myMethod: (echo) ->
@$el.html(@options.paramA + ': ' + echo)
# Define the plugin
$.fn.extend myPlugin: (option, args...) ->
@each ->
$this = $(this)
data = $this.data('myPlugin')
if !data
$this.data 'myPlugin', (data = new MyPlugin(this, option))
if typeof option == 'string'
data[option].apply(data, args)
) window.jQuery, window
@bigardone

This comment has been minimized.

Copy link

@bigardone bigardone commented Jan 16, 2013

Nice! I was looking for something like this!

@ajb

This comment has been minimized.

Copy link

@ajb ajb commented Jul 8, 2013

Just wanted to say this is fantastic.

@umhan35

This comment has been minimized.

Copy link

@umhan35 umhan35 commented Aug 22, 2013

+1 @adamjacobbecker

@aponxi

This comment has been minimized.

Copy link

@aponxi aponxi commented Aug 23, 2013

+1 thanks!

@sergio1990

This comment has been minimized.

Copy link

@sergio1990 sergio1990 commented Dec 1, 2013

+1 this is good work!

@pharmazone

This comment has been minimized.

Copy link

@pharmazone pharmazone commented Jan 21, 2014

+1 thanks!

@gosukiwi

This comment has been minimized.

Copy link

@gosukiwi gosukiwi commented Feb 13, 2014

+1 :)

@bbuchalter

This comment has been minimized.

Copy link

@bbuchalter bbuchalter commented Feb 19, 2014

+1 thank you!

@codearachnid

This comment has been minimized.

Copy link

@codearachnid codearachnid commented Mar 8, 2014

fantastic thank you for putting this together!

@machucarro

This comment has been minimized.

Copy link

@machucarro machucarro commented Jan 8, 2015

+1 Great template! Thanks!
I have just a question, wouldn't it be better to attach the "myPlugin" data in the constructor and remove it inside a destroy method?

As I understand your code, it would be a bit akward if you want to allow the sequence
create -> destroy -> create
on the same DOM element because then the destroy method would need to remove the reference to data-myPlugin which is set outside the class if you want the second "create" to be executed.

Did I understand it right?

@Soviut

This comment has been minimized.

Copy link

@Soviut Soviut commented Mar 30, 2015

I would use the following to wrap the outer self-calling function.

do($ = window.jQuery, window) ->
    # the rest of your code

That compiles to:

(function($, window) {
    // the rest of your code
})(window.jQuery, window);

That feels more coffeescript-ish to me.

@stevenspiel

This comment has been minimized.

Copy link

@stevenspiel stevenspiel commented Jun 26, 2015

beautiful. thank you

@sashaegorov

This comment has been minimized.

Copy link

@sashaegorov sashaegorov commented Oct 30, 2015

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment