CODEWITHSUNDEEP
javascriptruby-on-rails
Aleksandr K.
Aleksandr K.

Reputation: 1415

Where put javascript code in RoR web app?

I'm new to web-developing, so this question I think simple for many of you guys, but difficult to me.

On my page I have 1000+ lines of js, I can split it on 3 types:

1.Where I define global variables and ask back-end for initial data:

var charts_data = #{@object.charts_data};

var max_height = #{@object.max};
var min_height = #{@object.min};

var param_from = #{params[:f].nil? ? -1 : params[:f]};
var param_to = #{params[:t].nil? ? -1 : params[:t]};

2.Where I define some supporting functions (helpers), not relating to current page, i.e. for array:

function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = obj.constructor();
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
  }
  return copy;
}

3.Functions related to current page, that use selectors based on page elements, i.e.:

$('#range-from, #range-to').keypress(function (e) {
  //if the letter is not digit then display error and don't type anything
  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    return false;
  }
});

Could you guys help me to clear my view from js and correctly split it and put in another files?

Upvotes: 0

Views: 84

Answers (3)

blelump
blelump

Reputation: 3243

Managing javascript in Rails is rather a matter of preference. Assume a project depends only on jQuery, then I would sort the code among three levels.

  1. application layout, where your backend dependent variables have to be defined;
  2. some common .js file to store common code across controllers;
  3. code specific only for one/a few views so it is not needed to be always loaded.

In Rails, every Javascript code goes to app/assets/javascripts (at least from version 3.2). The tree might look like:

.
| application.js 
| common.js
| users
|      \ new.js
|      \ index.js
| ...

application.js only define requirements for app dependent libraries, e.g. jQuery. common.js contains common code of your app and users/new.js contains code specific only for that particular view. To use such approach of code storage, it is needed to tell Rails that a particular file has to be loaded for particular view. It can be done by:

# application layout:
<body>
...
...
<%= yield :additional_javasript %>
</body>

# users/new.html.erb:
<% content_for :additional_javasript do %>
  ...
<% end %>

Upvotes: 1

raulchopi
raulchopi

Reputation: 338

I'd recommend you to use angularJS (JS framework) to organize your JS. I use it in my RoR projects.

Check this page out: http://angular-rails.com/

Upvotes: 1

DrZoidberg
DrZoidberg

Reputation: 38

I'm not an RoR pro myself, but would probably start of like this...

It all seems to be view related so in my eyes it belongs into the rails given helper modules.

Your first block doesn't seem to be page related so it might find space in the ApplicationHelper. Your second block (as related to a specific page) would fit perfectly into its page helper. The third one I would store in the page-related js-File (to find under 'assets' -> 'javascripts').

..maybe there is a better solution, but like this you should be pretty well sorted out.

Upvotes: 1

Related Questions