CODEWITHSUNDEEP
ruby-on-railsdebuggingcoffeescriptasset-pipeline
Ninjaxor
Ninjaxor

Reputation: 998

How to develop with coffee script with rails

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()

Upvotes: 3

Views: 5930

Answers (1)

deefour
deefour

Reputation: 35360

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.

Upvotes: 4

Related Questions