In Rails application you can manage page specific JS very easily with the help of Paloma gem. Paloma gem is a logical way of managing Rails JavaScript files.
Requirements to use Paloma gem
- jQuery 1.7 or higher
- Rails 3.1 or higher
Paloma is a very beautiful library through you can load the JS as per the page and its action. Its setup is less time taking on the other hand the performances is very high.
Pros of Paloma
- You can organize the JavaScript files as per the controller just like views folder structure of Rails.
- You can add JavaScript file per controller’s action.
- You can also choose the JavaScript code which you want to run per page & its action.
- Ruby on Rails Development variables are easily available on your JavaScript files.
How to Install Paloma
1. Add the gem to gemfile
Without bundler
sudo gem install paloma
With bundler, add this to your Gemfile
gem 'paloma'
2. Require Paloma in your application.js file
//= require paloma
Read Also - Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes
3. Add the Paloma hook to your layout file
In the current application, I am using application layout so I am adding Paloma’s hook (insert_paloma_hook) to application.html.erb file.
Insert_paloma_hook is responsible for connecting your Ruby code to your JavaScript code.
4. Start Paloma to initialize the appropriate controller and execute a certain action.
Create new JS file initializer.js under app/assets/javascripts folder add the below code in that file. You need to add the code inside the document.ready.
This is optional you can add the below code in the application.js file as well it totally depends on you.
After this, you need to require the initializer.js file to your application.js file after the Paloma
Application.js
Now you are all set and ready to go with Paloma.
Let's talk about how it works with Rails controller and its action.
Controllers
Paloma controllers are javascript classes which were mapped with your Rails controller. Basically, Paloma and Rails controllers both will share the same name.
It is accessed, using Paloma.controller method if exist.
Actions
To handle specific actions of your Rails controller, you need to add methods to your Paloma controller's prototype.
You can also add the Paloma for the namespaced controller
Controller
JS file
Let’s starts with an example
Currently, I am having one simple controller named clients controller, I need to load the JS code only for the index action of the client so when the client index action is fire at that time that specific JS is load.
First of all, create client index action js file under the app/assets/javascript
I have created a page_specific folder under the app/assets/javascript folder. Here you can give any name to your folder or JS file because it basically works on the Paloma.controller and ControllerName.prototype.ActionName which are defined in the JS file.
app/assets/javascripts/application.js
Note: Keep in mind that you need to require your specific JS to application.js file for making it available for the controller or its action when any specific page is load.
app/controllers/clients_controller.rb
app/assets/javascripts/page_specific/client/listing.js
So whenever I hit the 'http://localhost:3000/clients' URL in the browser it will give me an alert message says ‘This is the JS code for clients index action’
But this alert is only displayed in the client's index action. In the other pages, it will not load.
Home Page
Client Index Page
You can also define the multiple actions in single Js file
Suppose you have a client.js file under app/assets/javascripts/page_specific folder
In clinet.js file, you can define multiple actions in that single file like,
So this depends on you how you want to make your JS folder structure and how you want to use it into your code.
This is how you can load the page specific JS to your application as per your requirements and make your application run faster than the usual. Reach out to learn more about the expert software development companies in NYC for the various ways to improve or build the quality of projects and across your company.
Top comments (0)