#74 Page Specific Javascript in Ruby on Rails

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>'); });