JavaScript file per view in Rails


As per 'unobtrusive JavaScript' recommendations I want to separate my JavaScript logic into
separate files. However I don't know how to organize them.

Should I:

  1. Just throw all application javascript into Application.js file and load it with layout page? This is simple approach but I will end up with a bloated Application.js. Some users might want to visit only a couple of pages, but this entire file would preloaded which is not good.
  2. Or should I create a separate javaScript file for each view and load them independently? This creates a set of questions. How to link each js file to corresponding view?

Best Answer

Load the main JavaScript in application.js every time. Now create files for different needs. Create a form.js file, a myfancypart.js file etc. Don't load them in the application.html.erb layout. Load them dynamically when you need them:


<%= javascript_include_tag "application" %>
<%= yield :javascript_includes %>

top of your view.html.erb:

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "forms.js" %>
<% end %>

Everything in the content_for block will be loaded at yield :javascript_includes.