How to develop with coffee script with rails

Question

I've been thinking about CoffeeScript lately, and I just upgraded a Rails project I've been working on to Rails 3.2.8 (from Rails 3.0.9 which didn't have the asset pipeline) following this guide.

I had to do some hackish stuff to get things to work properly. I'm testing out a new page, '/pages/game' and so it has some example CoffeeScript in the the asset directory.

(app/assets/javascripts/page.js.coffee)

class MyObject
  constructor: ->
  hello: -> alert 'hello world of coffeescript!'


a = new MyObject

a.hello()

Then I added a line to my production environment: (config/environments/production.rb)

config.assets.precompile += %w( pages.js )    # this is needed to precompile coffee script files... it is difficult to understand how manifest files work...

Then typing

$  bundle exec rake assets:precompile

Worked to compile page.js The only problem is that the class I created with CoffeeScript doesn't work exactly as I anticipated. So I opened up my developer console in FireFox and attempted to instantiate the class manually, but it acted like there was no such object named MyClass.

So where have I gone wrong? Was it presumptuous of me to assume I could manually instantiate classes I've written in CoffeeScript? Was my hackish means of adding pages.js to the precompile array inappropriate? If you're a CoffeeScript pro, how would you test your classes and such?

Update: Part of my problem was the 'variable privacy' that is inherant in coffee script classes. This privacy can be implemented in standard javascript, and should be understood before dabbling too far into coffee script. http://benalman.com/news/2010/11/immediately-invoked-function-expression/

That said, the coffee script class needed to be attached to the window object to make it globally accessible, like so:

Corrected

class MyObject
  constructor: ->
  hello: -> alert 'hello world of coffeescript!'


window.MyObject = MyObject;

Once the class is published in this manor (by attaching it to window as a global) it can be instantiated via a = new MyObject() and then have its function called normally to alert to the screen a.hello()

Please keep in mind that Stack Overflow, like Wikipedia, is primarily meant to serve a a reference. The tone of your writing should be professional. — user229044
– user229044 ♦, Commented Aug 31, 2012 at 19:21
You shouldn't have added pages.js to your precompiled assets. Rather, you should have added it to your JS manifest file via //= require pages. Simply adding it to the precompiled assets doesn't include it in your page. — user229044
– user229044 ♦, Commented Aug 31, 2012 at 19:22

deefour · Accepted Answer · 2012-08-31 19:15:46Z

4

MyObject absolutely exists if you include pages.js's contents into your page. You likely need to add

<%= javascript_include_tag "pages" %>

to your HTML or not set

config.assets.precompile += %w( pages.js )

and instead add the following to app/assets/javascripts/application.js.coffee

//= require pages

and make sure application.js is being included in your app/views/layouts/application.html.erb with

<%= javascript_include_tag "application" %>

The Rails Guide on the asset pipeline is quite helpful. To provide a bit of explanation here though...

Rails wants you (by default) to pack all of your javascript into a single application.js file when deploying to production. Sprockets is available to let you add require directives like the one above to find, include, and compile the files listed into the application.js file.

By default Rails will only compile application.js, application.css and any NON-.js/.css file in app/assets, lib/assets, and vendor/assets. This means, unless you add a //= require directive for pages.js to your application.js file, Rails is going to ignore it.

Thats why you tried adding pages.js to the list of files for compilation with config.assets.precompile. This tells Rails explicitly to compile that file, making it available through a javascript include like

<%= javascript_include_tag "pages" %>

which I am assuming you've not put into your HTML. Going this route is not typically what you for a few reasons, one of which is that by doing so you're saying "No thanks" to the help Rails is trying to provide you with the asset pipeline //= require lines.

So, either method is doable; you've just yet to follow through with all the steps necessary to get pages.js's contents included in your page, which is why MyObject doesn't exist.

edited Aug 31, 2012 at 19:15

answered Aug 31, 2012 at 19:02

deefour

35.4k7 gold badges99 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ninjaxor Over a year ago

Thanks for the response. I did have things somewhat working correctly by the <%= javascript_include_tag "pages" %> method. The only problem was that my javascript code looked like this pastebin.com/HZG6bzfp and it seems to be getting run twice because I see the alert message twice.

Ninjaxor Over a year ago

Ok, I went back to it, cleaned out a bunch of pages.js cache files and the alert msg only appeared once. I also attached the class to window by doing 'window.MyObject = MyObject' within my coffee script file because that seems to be how you declare public classes which allows me to debug using the console just as I always have with straight javascript projects. Thanks so much for helping me get CoffeeScript off the ground.

BenKoshy Over a year ago

@deefour hi - does this apply to rails 4?

Collectives™ on Stack Overflow

How to develop with coffee script with rails

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related