CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4asset-pipeline
Don P
Don P

Reputation: 63587

Asset pipeline: use javascript files for only one controller

In Ruby on Rails v4, I want a js file (or set of js files) to be only loaded for a particular controller.

What is the standard way to do this?

In application.js there is the //= require tree . line. I'm assuming this would need to be removed so I'm not always loading every file. But then what? Will a file named mycontroller.js always be loaded when Mycontroller is used?

Upvotes: 2

Views: 2087

Answers (2)

phoet
phoet

Reputation: 18835

It works like this:

You define additional files that should be precompiled:

# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)

Then in your layout you implement some logic to include this file:

= javascript_include_tag "#{controller_name}.js" if controller_name == 'mycontroller'

Upvotes: 1

Richard Peck
Richard Peck

Reputation: 76774

The asset pipeline can be very powerful if you do it right:

Manifests

The purpose of //= require tree . is to create a "manifest" file which Rails will use to render the files you call. If you don't "precompile" your assets, this means that each time your browser loads your app, it will look for the files contained in your manifest & load them

This means that you can define what you call in your manifest & what you don't. We prefer to call any gem-based assets in the manifest, but also designate specific folders, like this:

//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks

We use this setup to call all JQuery plugins & any extra JS, as well as the gem-specific files

Precompiling

If you pre-compile your assets, it basically builds different files which are loaded consistently when you load the browser. If you're using Heroku or a CDN, you may wish to precompile your assets, as to reduce latency & dependency

Application Design

To answer your question, you can certainly load controller-specific JS. We do it like this:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>

You can then ensure your JS files are split up by using what Phoet described:

#config/environments/production.rb
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)

Then for application.js, you can only call the files you want to persist throughout the app:

#app/assets/javascripts/application.js
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks

Upvotes: 4

Related Questions