jQuery with CoffeeScript

CSS-Tricks

jQuery with CoffeeScript

I don't always write CoffeeScript, but when I do, I'm probably using jQuery too I always forget the syntax for stuff. So I'm going to write it all down here so I can reference it until I memorize it.

Note that the compiled example doesn't include the automatic closure around everything you get in CoffeeScript.

Safe jQuery Closure

So you can use the $ safely (common in WordPress):

(($) ->
  
) jQuery

(function($) {

})(jQuery);

DOM Ready

$ ->
  console.log("DOM is ready")

$(function() {
  return console.log("DOM is ready");
});

Call Method with No Params

$(".submit").click ->
  console.log("submitted!")

$(".submit").click(function() {
  return console.log("submitted!");
});

Call Method with One Param

$(".button").on "click", ->
  console.log("button clicked!")

$(".button").on("click", function() {
  return console.log("button clicked!");
});

Call Method With Multiple Params

$(document).on "click", ".button2", ->
  console.log("delegated button click!")

$(document).on("click", ".button2", function() {
   return console.log("delegated button click!");
});

Params in the Anonymous Function

$(".button").on "click", (event) ->
  console.log("button clicked!")
  event.preventDefault()

$(".button").on("click", function(event) {
  console.log("button clicked!");
  return event.preventDefault();
});

Returning False

$(".button").on "click", ->
  false

$(".button").on("click", function() {
  return false;
});

A Simple Plugin

$.fn.extend
  makeColor: (options) ->
    settings = 
      option1: "red"
    
    settings = $.extend settings, options
    
    return @each () ->
      $(this).css
        color: settings.color

$.fn.extend({
  makeColor: function(options) {
    var settings;
    settings = {
      option1: "red"
    };
    settings = $.extend(settings, options);
    return this.each(function() {
      return $(this).css({
        color: settings.color
      });
    });
  }
});

Using Plugin

$("a").makeColor
   color: "green"

$("a").makeColor({
  color: "green"
});

Ajax

Note the string interpolation in there too, that's nice.

$.ajax
   url: "some.html"
   dataType: "html"
   error: (jqXHR, textStatus, errorThrown) ->
     $('body').append "AJAX Error: #{textStatus}"
   success: (data, textStatus, jqXHR) ->
     $('body').append "Successful AJAX call: #{data}"

$.ajax({
  url: "some.html",
  dataType: "html",
  error: function(jqXHR, textStatus, errorThrown) {
    return $('body').append("AJAX Error: " + textStatus);
  },
  success: function(data, textStatus, jqXHR) {
    return $('body').append("Successful AJAX call: " + data);
  }
});

Animation

Two ways.

div.animate {width: 200}, 2000

div.animate
  width: 200
  height: 200
  2000

div.animate({
  width: 200
}, 2000);

div.animate({
  width: 200,
  height: 200
}, 2000);

Animation with Callback

div.animate
  color: red
  2000
  ->
    doSomething()

div.animate({
  color: red
}, 2000, function() {
  return doSomething();
});

Chaining

Not too much different.

$("input")
  .val("")
  .css
    'z-index': 5
  .removeClass "fart"

$("input").val("").css({
  'z-index': 5
}).removeClass("fart");

Promises

The last line gets returned here when it doesn't really need to but whatever.

$.when(
  $.get("/feature/", (html) ->
    globalStore.html = html;
  ),
  $.get("/style.css", (css) ->
    globalStore.css = css;
  )
).then -> 
  $("<style />").html(globalStore.css).appendTo("head")
  $("body").append(globalStore.html)

$.when($.get("/feature/", function(html) {
  return globalStore.html = html;
}), $.get("/style.css", function(css) {
  return globalStore.css = css;
})).then(function() {
  $("<style />").html(globalStore.css).appendTo("head");
  return $("body").append(globalStore.html);
});

Fat Arrow to Retain `this`

Otherwise inside the setTimeout you wouldn't have a reference to the button.

$(".button").click ->
  setTimeout ( =>
    $(@).slideUp()
  ), 500

$(".button").click(function() {
  return setTimeout(((function(_this) {
    return function() {
      return $(_this).slideUp();
    };
  })(this)), 500);
});

---

Here's the lot of them in a Pen if you wanna tinker.

---

jQuery with CoffeeScript is a post from CSS-Tricks

more info...