Where put javascript code in RoR web app?

Question

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?

DrZoidberg · Accepted Answer · 2014-11-01 15:31:00Z

1

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.

answered Nov 1, 2014 at 15:31

DrZoidberg

385 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raulchopi · Accepted Answer · 2014-11-01 16:08:09Z

1

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/

answered Nov 1, 2014 at 16:08

raulchopi

3381 silver badge10 bronze badges

2 Comments

Joel Brewer Over a year ago

While Angular is a great framework, I don't think this really answers OPs question "where to put javascript code"

raulchopi Over a year ago

I think it does. AngularJS's tutorial tells you how to organice your JS and where to put each part of it, directives, controllers...

blelump · Accepted Answer · 2014-11-01 18:12:58Z

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.

application layout, where your backend dependent variables have to be defined;
some common .js file to store common code across controllers;
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 %>

Collectives™ on Stack Overflow

Where put javascript code in RoR web app?

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related