Page Specific Javascript in Ruby on Rails

Episode #74 by Teacher's Avatar David Kimura

Summary

Sometimes you may find yourself with an application that has javascript that needs to execute only on a specific page. This episode lays the foundation to easily manage page specific javascript.
rails javascript view 4:44

Resources

Summary

# application.html.erb
# use either the meta tag or body's data attributes.
<head>
  ...
  <%= tag :meta, name: :psj, action: action_name, controller: controller_name %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  ...
</head>

<%= content_tag :body, data: { action: action_name, controller: controller_name } do %>
  ...
<% end %> 

# app/javascripts/init.coffee
class Page
  controller: () =>
    $('meta[name=psj]').attr('controller')
    # $('body').data('controller')
  action: () =>
    $('meta[name=psj]').attr('action')
    # $('body').data('action')

@page = new Page

# Javascript equivalent

var Page, bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Page = (function() {
  function Page() {
    this.action = bind(this.action, this);
    this.controller = bind(this.controller, this);
  }
  Page.prototype.controller = function() {
    return $('meta[name=psj]').attr('controller');
  };
  Page.prototype.action = function() {
    return $('meta[name=psj]').attr('action');
  };
  return Page;
})();
this.page = new Page;

# visitors.coffee
$(document).on 'turbolinks:load', ->
  return unless page.controller() == 'visitors' && page.action() == 'index'
  # return unless $('meta[name=psj]').attr('controller') == 'visitors' # && $('meta[name=psj]').attr('action') == 'index'
  # return unless $('body').data('controller') == 'visitors' && $('body').data('action') == 'index'
  $('main').append '<li>Hello from visitors</li>'

# Javascript equivalent

$(document).on('turbolinks:load', function() {

  if (!(page.controller() === 'visitors' && page.action() === 'index')) { return; }
  return $('main').append('<li>Hello from visitors</li>');
});

# app/javascripts/users/index.coffee
$(document).on 'turbolinks:load', ->
  return unless page.controller() == 'users' && page.action() == 'index'
  $('main').append '<li>Hello from users index</li>'

# Javascript Equivalent

$(document).on('turbolinks:load', function() {

  if (!(page.controller() === 'users' && page.action() === 'index')) { return; }
  return $('main').append('<li>Hello from users index</li>');
});

# app/javascripts/users/users.coffee
$(document).on 'turbolinks:load', ->
  return unless page.controller() == 'users' 
  $('main').append '<li>Hello from users controller</li>'

# Javascript Equivalent

$(document).on('turbolinks:load', function() {

  if (page.controller() !== 'users') { return; }
  return $('main').append('<li>Hello from users controller</li>');
});