Question

I’m trying to come to terms with CoffeeScript after checking out LESS css yesterday, I was very impressed with that.

I’m more of a jQuery wiz than Raw Javascript so I find it a little confusing, but at the same time I think looking into CoffeeScript is good as it will help me to get a better understanding by analysing the output.

var Raw = (function($) {

    $(function() {
        Raw.initialize();
    });

    return {
        _current: '',
        initialize: function() {
            this.initGlobal();
            if(this.is('index')) {
                this.initIndex();
            }
            else if(this.is('single')) {
                this.initSingle();
            }
        },
        initGlobal: function() {
            atom_twitter();
            atom_loading();
            ratings();
        },
        initIndex: function() {
            atom_scroll();
        },
        initSingle: function() {
            atom_download();
        },
        is: function(page) {
            if(this._current == '') {
                this._current = $('body').attr('id');
            }
            return this._current == page;
        }

    };

})(jQuery);

Any ideas where to start?

So far I have this:

Raw = (($) ->
  console.log 'hello world'
)(jQuery);

Which outputs:

(function() {
  var raw;

  raw = (function($) {
    return console.log('hello world');
  })(jQuery);

}).call(this);

Answer 1

Here’s how I’d do it:

raw = do ($ = jQuery) ->
  $ raw.initialize
  {
    _current: ''
    initialize: ->
      @initGlobal()
      if @is 'index'
        @initIndex() 
      else if @is 'single'
        @initSingle()
    # and the rest...
  }

Note that there may be a problem with the code you’re trying to port: A function passed to $ will be run when the DOM is ready, or immediately if the DOM already is ready. So if the DOM is ready when this code runs, raw.initialize will be called before raw is defined, causing an error.