how should I include a coffeescript file on only one page?

Question

Edit: a year later if I was going to do this again I'd do it with curl.js instead of Rails asset pipeline.

Related: Best way to add page specific javascript in a Rails 3 app?

I'm writing an app and using coffeescript to generate all of the js. That's why the related question doesn't do what I need.

I'd like to be able to put a coffeescript file in a subfolder of my assets directory and have that .coffee file only get served up on one page. The page is on a named route

match 'myNotifications' => 'user#notifications'

The most obvious thing to do was to put the .coffee file in assets\javascripts\user\index.js.coffee. But after reading the docs about assets I'm unclear.

I read this line (from http://guides.rubyonrails.org/asset_pipeline.html):

You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

Ok cool, so I put the page specific js in assets\javascripts\user.js.coffee. Then I reloaded my home page, Ctrl F5. The user.js file is still being loaded on the homepage. Tested with $ -> alert 'ready from users controller'; seeing that alert when I load the homepage.

Does Rails have a way to have a per-page coffeescript file that will only be served up with that page? Am I reading the manual wrong? Is there a place in the assets folder that I can put .coffee files where they won't get loaded with every page?

Update: Looks like I might have an answer:

There are a couple of ways that we can get around this problem. We could use require_directory instead of require_tree as this will only load the files in the current directory and not in subdirectories. If we want more control over the included files we can require them separately instead of including the whole directory. Alternatively we could move the JavaScript files that we want to be included on all pages into a public subdirectory. We can then use require_tree ./public to include just those files.

I'll give that a shot in the AM.

Answer 1

Here's the approach I use to make controller/view specific Coffee:

application.html.haml:

%body{ :data => { :controller => params[:controller], :action => params[:action]} } 

alt. application.html.erb

<%= content_tag(:body, :data => { :controller => params[:controller], :action => params[:action] }) do %>   ... <% end %> 

application.js.coffee:

$(document).ready ->   load_javascript($("body").data('controller'),$("body").data('action'))  load_javascript = (controller,action) ->   $.event.trigger "#{controller}.load"   $.event.trigger "#{action}_#{controller}.load" 

users.js.coffee

$(document).bind 'edit_users.load', (e,obj) =>   # fire on edit users controller action  $(document).bind 'show_users.load', (e,obj) =>   # fire on show users controller action  $(document).bind 'users.load', (e,obj) =>   # fire on all users controller actions 

Sidenote:

This works great with PJAX as well as you can pass the controller/action names with the response header on PJAX requests and just fire these js functions based on that.

EDIT (2014/03/04): This solution still works when using turbolinks.js.

Answer 2

Rather than only including the file on one page, you might want to just use logic that's conditional on the page markup. See my answer to a related question. That way, your users don't have to make an additional <script> request for the particular page.

If there's a lot of logic specific to that page (say, 10K+ minified), then yes, split it out. As you suggested in the edit to your question: Rather than doing require_tree . at the root of your javascripts directory, instead create a sub-directory called global and change the top of application.js from

require_tree . 

to

require_tree global 

Then put your page-specific CoffeeScript file in the root javascripts directory, and point to it with a javascript_include_tag call in that page's template.