Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I agree with apneadiving.. personally, the js.erb calls add alot of cognitive overhead. What I do is load my javvavscripts into a layout partial</p> <p>*app/views/layouts/_javascripts.html.haml</p> <pre><code>= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js' = javascript_include_tag "http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" = include_javascripts :app = hoptoad_javascript_notifier = yield :javascripts </code></pre> <p>Then I use the <code>jammit</code> command from the <a href="http://documentcloud.github.com/jammit/" rel="nofollow">Jammit</a> gem to minifiy, and compress my js and css assets</p> <p><em>config/assets.yml</em></p> <pre><code>javascripts: app: - public/javascripts/rail.js - public/javascripts/underscore-min.js - public/javascripts/jquery.dump.js - public/javascrippts/etc*.js </code></pre> <p>The for each page needed custom page-level js, I throw a <code>content_for :javascripts</code> block in at the bottom of the page:</p> <p><em>app/views/something/awesome.html.haml</em></p> <pre><code>%h1 cool page Other cool stuff - content_for :javascripts do :javascript $(document).ready(function(){ console.log('This document is REaDY!! and, this page rocks'); $.ajax({ url: "#{new_item_path(@item)}", //ruby is evaluated due to string interpolation success: function(data) { console.log('Loaded ' + data + ' from ' + #{new_item_path(@item)}) } }); }; </code></pre> <p>This lets me then to a <code>render 'layouts/javascripts'</code> at the bottom of my <code>application.html.haml</code> layout, and all of my javascript geets piped to the bottom of the page, so speed up page load as <a href="http://developer.yahoo.com/performance/rules.html" rel="nofollow">suggested here by Yahoo</a> This also lets me use the erb to generate variables for the page-level js from Rails if needed</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. COThanks Noli. I'll have to check out Jammit when I push this to production. In your example `awesome.html.haml`, you're putting a javascript call into your html. Is this a good practice? I thought the "rails way" was to put all of your javascript into a separate file to keep things clean. But, if you can pass variables from ruby to javascript via your `content_for` tag, I'm sold. In fact, passing variables from ruby to javascript will eliminate many of the cases where I need separate files. Can you give an example of passing a variable from ruby to js? Thanks!
      singulars
    2. COWell, I think of it this way.. "the rails way" is often preachy. The only "best practice" is thinking. For my applications, the presence of the js next to the code helps me in several ways: 1) if its JS that varies based on my data, I can use ruby variables to render it, as you have stated, so its a definite plus for that. 2) I often find myself wondering which DOM eelements are connected to js handlers. If the relevant js code is right there in front of me, it creates no confusion for our team (I write code, someone else comes and modifies it, its all explicit). I'm altering my
      singulars
    3. CO3) for cacheable static JS, its definitely better to put it in a seperate page, minify, cache, compress it. For things that could change depending on the page (if you want to use ajax to submit to a named route, for example) thats a good case for using the rails named route instead of saying $.ajax('/search',... ) s a result, it does increase your page size slightly, but it also lowers the number of HTTP requests for that page load. So if its dynamic, and short js snippets, its a good compromise
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload