Working with CoffeeScript on SharePoint : Interacting through jQuery

Now in this next part, lets see how CoffeeScript can be used with jQuery on SharePoint:
Lets start with the most nifty feature first:

$(document).ready(function () { 
    //Code here.
});

is now:

$ ->

    //Code here.  

CoffeeScript makes it extremely easy to iterate over jQuery collections using the for loop:

	#All the hrefs are extracted from all the anchor links on the page and stored in the array 'anchorHrefs'
	anchorHrefs = anchor.href for anchor in $("a")

view raw cffor.coffee hosted with ❤ by GitHub

Simple demo using CoffeeScript with jQuery to create a button, append it after the SP ribbon and assign a click function to it.

	#Create a new Button
	myButton = $("<input id='cfLink' type='button' value='Click Me'/>")
	#Assign a click function to the button which sends the button itself as the first parameter
	myButton.click -> linkClicked (this)
	#Push myLink into the DOM after the ribbon container.
	$("#s4-ribbonrow").after myButton
	#When this function is called, alert the value attribute of the button.
	linkClicked = (button) ->
	alert button.value

view raw jQueryCoffee.coffee hosted with ❤ by GitHub

I hope you have enjoyed the series as much as me. Please feel free to leave me any feedback through comments or email. Happy Exploring!

GitHub Link to the project: https://github.com/vman/SPCoffeeScript