unobtrusive rollover coffeescript vs original

unobtrusive_rollover.js

// purpose of script is to handle rollovers unobtrusively, e.g.
// <img src='original.png' data-rollover='rolled.png'>

$(function(){
  $('img[data-rollover]').live('mouseover', function(){
    if($(this).data('rollover-original') == null) {
      $(this).data('rollover-original', $(this).attr('src'))
    }
    $(this).attr('src', $(this).data('rollover'))
  }).live('mouseout', function(){
    $(this).attr('src', $(this).data('rollover-original'))
  })
})

unobtrusive_rollover.js.coffee

# coffeescript version
# eh, it's not that much nicer. Maybe if I could replace '$(this)' with something like '$@' ?
# but then it starts looking like perl :(
$ ->
  $('img[data-rollover]').live 'mouseover', ->
    $(this).data 'rollover-original', $(this).attr('src') unless $(this).data('rollover-original')?
    $(this).attr 'src', $(this).data('rollover')
  .live 'mouseout', -> $(this).attr 'src', $(this).data('rollover-original')

Hey, if you'd rather type function() { } instead of ->, be my guest. :)

I think where CoffeeScript really shines is in large applications, where classes provide a very neat way of organizing your code (even if you're not totally into classical OO). I hope you'll keep that in mind in your front-end coding endeavors.

On Sat, Jun 4, 2011 at 4:52 PM, TrevorBurnham < ***@***.***>wrote: Hey, if you'd rather type `function() { }` instead of `->`, be my guest. :)

Actually in Textmate I just have to do f-tab, so it's actually less keystrokes. In fact, I had actually forgotten about this shortcut and had been typing it manually until I saw your comment and I was like "oh, right, there's a shortcut for that!" I agree in principle though, and yes -> looks nicer, and yes it's more expressive.

I think where CoffeeScript really shines is in large applications, where classes provide a very neat way of organizing your code (even if you're not totally into classical OO). I hope you'll keep that in mind in your front-end coding endeavors.

Sure, and I have to say, I don't do a lot of real object oriented JS, I don't generally make my own, umm, what do they call them? prototypes or something? I don't really do my own libraries, and I really ought to, and I see where this might make those a lot cleaner.

It is worth noting that I am now a coffeescript convert - today I would no sooner use plain JS instead of coffeescript than I would use html or erb instead of haml or slim.