CODEWITHSUNDEEP
javascriptruby-on-railsasset-pipeline
user101289
user101289

Reputation: 10422

rails 4 - all javascripts being included at all times

I understand the "why" part of "why do all js / css files get included in rails asset pipeline" as explained here.

However, that's not always desirable, is it? For instance, I have a non-standard layout I use just to display items that require Google maps. I don't want all the external gmap libraries included on all pages-- it's not necessary and is just wasteful-- but if I don't include them on every page, the calls to the google api in the map.js.coffee files will throw errors.

Is there a way to force the map.js.coffee ONLY show on a maps view?

Upvotes: 3

Views: 205

Answers (3)

user101289
user101289

Reputation: 10422

To combine what the other answers suggested and other sources on the web advised, it seems like the best answer to this situation is to do the following:

Create subdirectories in the assets/javascripts and assets/stylesheets directories as well as maps.js and maps.css files. In my example above you'd have 

app/
    assets/
        javascripts/
            application.js
            maps.js 
            maps/
            site/
        stylesheets/
            application.css
            maps.css
            maps/
            site/

Create any needed page-specific javascripts / stylesheets in those directories.

The maps.js file would look like:

//= require_tree ./maps

which will include all items in the maps directory / subdirectories.

The application.js is the same but includes the "main" site resources as well as any site-specific items:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree ./site

Create a maps layout file called views/layouts/maps.html.erb, and in the layout file, use the javascript_include_tag to change which js / css file gets parsed for includes:

views/layouts/maps.html.erb:

<%= stylesheet_link_tag    "maps", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "maps", "data-turbolinks-track" => true %>

views/layouts/application.html.erb:

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

Make sure the MapsController specifies the maps layout!

class MapsController < ApplicationController
    layout "maps"

Upvotes: 1

MrYoshiji
MrYoshiji

Reputation: 54882

There is one solution, the javascript_include_tag:

# assets/javascripts/
#          user.js.coffee
#          form.js.coffee
#          map.js.coffee

# views/users/location.html.haml
= javascript_include_tag 'map'

But defining //= require_tree . in the assets/application.js does include all JS files, am I right?

So doing this would include the file twice, right?

Update: Following this RailsCast ( http://railscasts.com/episodes/279-understanding-the-asset-pipeline ) We might be able to create a public folder, containing all "shared" js files, and require it: //= require_tree ./public

Upvotes: 1

thethanghn
thethanghn

Reputation: 329

Notice the line in application.html.sim:

= javascript_include_tag "application"

You want to include a different set of javascripts in a different layout map.html.slim, then create another javascript file, such as map.js.coffee, and in this file you included only files you need. Now the layout file needs to use this

= javascript_include_tag "map"

Upvotes: 0

Related Questions