Working With Rails

Hi,

The question is should I put the code in to a separate javascript file or it is okay to put javascript with the html content it manipulates? Any advantages and >disadvantages?

you should put as much js-logic as you can into your static js-files under public/javascripts/* – so browsers can cache your static js-logic.
I use the “content_for :javascript”-technique for dynamic js-stuff. Ajax: if its dynamic js you could integrate the ajax-specific javascript
into the ajax-triggering view and/or into the resulting ajax-answer, your choice.

Hey Falk,

Thanks for your suggestion. But I think javascript code can also be cached with “content_for :javascript”-technique.
For pages that need specific javascript code besides common javascript code included in layout file,
we could include them like this:

-content_for :javascript = javascript_include_tag :specific_javascript_file_for_current_page

About dynamic js code, I agree with you, we have to put the javascript code into ajax-triggering view.

I think you should prevent yielded javascript code as much as possible. I always try to keep the javascript code in .js files and use describing CSS classes and semantic tags for jQuery to hook in on event and Ajax handling (I really recommend you to use jQuery instead of any other javascript library!). The only javascript code printed in your layout could be the authenticity token definition which enables you to use it in javascript.

(in application_helper.rb)
def define_authenticity_token
  javascript_tag ”$.authenticity_token = ’#{form_authenticity_token}’;”
end

(e.g. in layouts/application.html.erb)
<%= define_authenticity_token %>

As for organized javascript code in your rails application: use the Yahoo javascript module pattern! Doing this prevents your javascript files from just having dangling functions because you put them within seperate javascript modules.

Also I have created a gem called Jzip (http://github.com/archan937/jzip) which is inspirated by SASS and AssetPackager. This gem helps you to put javascript modules into seperate files as Jzip merges (and also minifies when desired) javascript files based on Jzip templates (each template stands for an outputted .js file). You can use Jzip partials which you can reuse for shared javascript files.

To keep the javascript files and Jzip templates / partials organized, I put them in namespaces and directories (just like with Ruby modules). This file is an example of a javascript module and this file ensures every init() function being called on inclusion of the javascript file. This Jzip template will be compiled to this javascript file.

For a complete example of Jzip templates, partials and javascript files, please visit http://github.com/archan937/jzip/tree/master/test/javascripts/assets/jzip/.

I use Jzip, jQuery and the javascript module pattern in every new rails project I start, it’s the only way to fly :P

I hope my answer can be of great help. Good luck!

I agree with Paul, yielding javascript on every page is sub-optimal. You are best off putting all your javascript functions in the main application.js and reference that right before the closing </body> tag. This way the entire javascript file can be minified, cached and its functions available to you on every page.

Then when you need to change page behaviour with javascript, never write an inline piece of code, but instead put it in the main .js file, in the document ready function:

$(document).ready(function(){ // Your code here });

If you want to call a function on, for example, the contact page, use a page-specific selector in the main javascript file. For instance, to add behaviour to the contact form use $(“form#new_contact”) to select it, then add the behaviour you want. This way, all your javascript code is in one place where you can easily find it.

When the main .js file becomes too big, use modules to organize it.