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