Skip to content

Latest commit

 

History

History
85 lines (58 loc) · 2.57 KB

README.md

File metadata and controls

85 lines (58 loc) · 2.57 KB
Raw

Page Specific JavaScript Framework

This is a page-specific JavaScript framework (primarily for Rails).

It allows you to target JS to run on all pages, for a specific action on all pages (e.g. index), for all actions for a specific controller, or for one page (specific controller/action).

Dependencies

  • Rails 3.1+
  • JQuery

Installation

  1. Require the gem. Add the following to your Gemfile, then run bundle:

    gem 'page_specific_js'

  2. Cause the page-specific JS framework to be loaded. For Rails 3.1: in your app/assets/javascripts/application.css.scss:

    //= require page_specific

  3. Create a JS namespace for your page-specific code, and call PageSpecific.init() on page load. This system assumes you follow the best-practise of namespacing all of your application JavaScript. For example let's assume you are namespacing all your JS under class "MyApplication". Put this in an appropriate spot in your JavaScript:

    MyApplication.PageSpecific = {};

$(document).ready(function() {
  PageSpecific.init(MyApplication);
});

  4. Set data-controller_name and data-action_name attributes on your document body, e.g. if you are using ERB, in application.html.erb:

    <body data-controller_name="<%= underscored_controller_name %>",
      data-action_name="<%= action_name %>">

    or if you are using HAML, in application.html.haml:

    %body{ :'data-controller_name' => underscored_controller_name, :'data-action_name' => action_name }

Usage

Write controller or page specific JavaScript as follows:

MyApplication.PageSpecific['AllControllers'] = {

  allActions: function() {
    // JS to be executed on every page
  },

  indexAction: function() {
    // code to be executed on all index pages
  }
};

MyApplication.PageSpecific['FooController'] = {

  allActions: function() {
    // code to be executed on all pages of FooController
  },

  barAction: function() {
    // code to be executed on FooController#bar page
  }
}

Notes

  • This is not an original teqhnique. I learned it from others while developing at Pivotal Labs and have implemented it several times over the years. This just my cleaned up and organized version.

  • All you JavaScript is still going to get loaded on every page; this only impacts what is executed. In practice this is not an issue as your javascript should be aggregated, minified, compressed and cached.

License

MIT. See LICENSE.txt