markbates/coffeebeans

The parts of CoffeeScript they forgot in Rails 3.1!

CoffeeBeans

Rails 3.1 has made quite a splash with its inclusion of CoffeeScript. I for one am very excited about being able to write JavaScript in an easier and more beautiful way. However, when CoffeeScript was added to Rails 3.1 they forgot one very important part, the ability to use it when responding to JavaScript (JS) requests!

In Rails 3.1 it’s incredibly easy to build your application’s JavaScript using CoffeeScript, however if you fire off an AJAX request to your application you can only write your response using regular JavaScript and not CoffeeScript, at least until CoffeeBeans came along.

Installation

Installing CoffeeBeans is simple. In your Rails 3.x project (yes, this works in Rails 3.0.x as well as Rails 3.1) add the following to your Gemfile:

gem 'coffeebeans'

Then run:

$ bundle install

That’s it! CoffeeBeans is now installed and ready to help you make the most of CoffeeScript in your Rails app. Enjoy!

Usage

Usage of CoffeeBeans is incredibly simple. Let’s say you want to respond to a JavaScript (JS) request using CoffeeScript just name your view something like this:

app/views/users/index.js.coffee

That’s it! You’re done. Now you can use CoffeeScript (and ERB) in that file. Nothing else special to do, tweak or change.

But Wait, There’s More!

Act now and we’ll throw in two view helper methods to help make it easy for you to write CoffeeScript in your views as well:

coffee_script_tag

The coffee_script_tag helper method will compile your CoffeeScript code and place it between script tags:

<%= coffee_script_tag do %>
  alert 'coffee script is awesome!'
<% end %>

Will generate:

<script type="text/javascript">
  (function() {
    alert('coffee script is awesome!');
  }).call(this);
</script>

coffee_script

Alternatively, if you want to place/compile CoffeeScript between script tags that are already on your page, then you can simply use the coffee_script helper to do that.

<script>
  <%= coffee_script do %>
    alert 'coffee script is really awesome!'
  <% end %>
</script>

Will generate:

<script>
  (function() {
    alert('coffee script is really awesome!');
  }).call(this);
</script>

Footnote

I really hope that this gem doesn’t have to be around too long and that the Rails team decides to actually add this into Rails proper. It seems like a no-brainer as far as I’m concerned. I did submit a pull request but it wasn’t accepted because they may want to refactor the rendering system in the future.

coffeebeans's Issues

Did this functionality ever become part of rails 4?

If so, I can't find it. Noting like coffee_script_tag exists yet, does it?

mention coffee-rails plugin in README

Hi,

perhaps in the README you should mention the fact that this gem's functionality has been also added to the coffee-rails gem (which is included in rails by default now)? I've just successfully tested it, one only has to move the coffee-rails gem out of the assets group in Gemfile.

Many thanks for your lifesaving gem anyway!

Matous

Add CDATA section to coffee_script_tag

Is there any reason for coffee_script_tag to not render JS inside a CDATA section as javascript_tag would do?

<%= javascript_tag do%>
   <%= coffee_script do %>

      if 2 < 0
         alert('uh?')

    <% end %>
<% end %>

the code above would render the following html that is friendly to any xml/html parser:

 <script type="text/javascript">
//<![CDATA[

(function() {

  if (2 < 0) {
    alert('uh?');
  }

}).call(this);

//]]>
</script>

instead of doing the same coffee_script_tag renders the code without wrapping it in CDATA turning html to not be well formed anymore (eg. 2 < 0):

<%= coffee_script_tag do%>
      if 2 < 0
         alert('uh?')
<% end %>

<script type="text/javascript">
(function() {

  if (2 < 0) {
    alert('uh?');
  }

}).call(this);
</script>

Thanks

escaping too much?

for some reason this:

$('div.input table tr.attachment-row .remove_row').click()
<% if @project.portfolio %>
portfolio_id = '<%=escape_javascript @project.portfolio_id.to_s %>'
portfolio_name = '<%=escape_javascript @project.portfolio.name %>'
portfolio = $('#project_portfolio_id')
option = portfolio.find('option[value='+portfolio_id+']')
if option.length is 0
  optionhtml = '<option value='+portfolio_id+'>'+portfolio_name+'</option>'
  portfolio.find('option').last().before(optionhtml)
portfolio.val(portfolio_id)
<% end %>

is rendering as this:

/*snip*/

if (option.length === 0) {
  optionhtml = '<option value=' + portfolio_id + '>' + portfolio_name + '</option>';
  portfolio.find('option').last().before(optionhtml);
}

/*snip*/

not the problematic <, > also if i use the rubyish string evaluations ("foo#{var}bar...") it escapes my double quotes and i end up with invalid syntax... why!? is this coffee beans' fault?

Coffeebeans & ERB

In Rails 3.1 final, when creating a file with both the .coffee and .erb extension doesn't work for me (in any order). The result is that the view is not recognized as a proper respond format and therefore the HTML view of the action is rendered instead (or a missing template error is thrown if no other format is available).

yield from within

It would be great if one could yield coffe_script from within the tag

= coffee_script do
  $(->
  my.application.init()
  = yield :js
  )

but this raises
SyntaxError: Reserved word "function" on line 3
of course that cs would have to be converted also, so I am unsure if this was trivial to implement...

trying to decompose .js.coffee into partials fails

main.js.coffee

...
<%=render :partial => 'cleanup' %>

_cleanup.js.coffee

x = 1
alert x

results in

ActionView::Template::Error (SyntaxError: reserved word "var" on line 12):

Ruby Variables

So how to use then my controllers instance variables?

show.js.coffee

alert @search

Somewhat like this doesn't work for me. Is it possible at all?

Thanks, Benjamin