Coffeescript and Haml with unobtrusive Javascript (data-remote) in Rails 3.1 - ruby-on-rails

I searched le interwebs, but I haven't found someone experiencing the same problem as me, so I propose my question here.
I just started using Rails 3.1 with Compass, Haml and CoffeeScript and ran into a problem. When I rename my controller-specific JavaScript file located in app/assets/javascript/index.js to index.js.coffee and translate the JavaScript code to CoffeeScript, everything works as expected - the file is requested by the browser and compiled on the fly into JavaScript. Changes in the CoffeeScript file do also trigger recompilation.
However, when I try to do this with unobtrusive JavaScript (:remote => true) and rename the already working JavaScript file located in the view folder app/views/index/index.js.haml to index.js.coffee.haml and translate the included code, Rails doesn't recognize it as a CoffeeScript that needs to be compiled.
What am I doing wrong? Do I actively have to enable CoffeeScript evaluation for the view? Where?

The asset pipeline introduced in Rails 3.1 will automatically compile coffeescript assets into javascript for you, as you've mentioned. This is currently NOT the case for views: only files in app/assets/javascripts will be compiled.
To use Coffeescript in views, you'll need to use https://github.com/markbates/coffeeBeans for the time being.
Update : per Kyle Heironimus' comment below, it seems this functionality can be provided by coffe-rails (see https://github.com/rails/coffee-rails and http://rubygems.org/gems/coffee-rails )

Related

Implementing Coffeescript into Rails Application

I have a CoffeeScript that I am trying to add into my current rails application. Once the script is in the assets/javascript folder how do I actually make it display on the page? I've gone through a bunch of tutorials and am still completely lost. Do I need to make a new controller?
Coffeescript is included as a default gem in Rails. Confirm by checking in your Gemfile.
Coffeescript is a language that compiles, so it won't 'display' on a page -- when you make a .coffee file, Rails will compile it to JavaScript when the page is loaded (or before, depending on how you do asset compilation). A coffeescript page is included the same way a js page is included (open your application.js page -- it'll have a comment explaining how to include JS).

Rails vendor asset templates

I was wondering if there was a good solution for getting vendor html templates into the rails asset pipeline. Right now I'm making it work by putting the two templates I need in /public
I used Bower to install angular-ui-bootstrap and I can require the javascript fine from application.js after adding the config.assets.path in application.rb.
How do you do the same for the html templates that the angular module needs? The JS is in /src, the template is in /template.
Not sure I understand the question. You can add them as template strings js in assets/javascripts but it could get a little messy.

Source maps in Ruby on Rails through sprockets

I'd like to add source map support on a rails 3.2 application I am working on. As far as I know, generating source maps is not supported by Sprockets and from its github page it looks like the feature is planned for 4.0. I am working with Sprockets 2.2 and I think monkey patching is the only way to go. The module Processing under the main Sprockets module gives access to the js_compressor function which can be patched to generate source map for a single file. But, I don't know how to add this when the JS files combine. I am using Uglifier 2.4 as the compressor.
The project has a mixture of CoffeeScript, JS and EJS files. So, I think this is how sprockets would be compiling them together. First, it would convert Coffeescript and EJS to JS, then use the js_compressor to compress individual files and later concatenate them in groups. Now, as the source map for multiple files combined to the same file is a single file. So, I will need to change the compilation process somewhat and make the js_compressor run over the files, once the concatenation is finished. So, can anyone help out with this? Even explaining the sprockets compilation process and the modules used and functions involved would be of great help. I don't care about making source map files for the CoffeeScript code at present. Even mapping to their converted JS files would do.
Also, would like to add if there is some gem which can help with this it would be most welcome.
Rails 4 does not have source maps either.
As far as I know, and as of today, this will only be part of rails 5.
A really nice approach to solve this right now is implemented in discourse by #SamSaffron and explained here:
https://github.com/discourse/discourse/blob/master/lib/tasks/assets.rake
The gist, add a "before" task to the sprockets precompile process, and hack into the compilation process to generate the sourcemapped files and directives.
The nice thing in this approach is that you don't lose stuff from files that are both js and erb (*.js.erb) which is something quite common in rails.
I think that patching the whole sprockets pipeline is a bit of an abuse and risky.

How to use Bootstrap from Twitter in a Rails 3.0 application?

In my rails 3.0.10 I would like to use Bootstrap from Twitter but I only found examples using Rails 3.1 and the Asset Pipeline. How would add it to my 3.0 application? Do I just download it from the main site and put the files inside of my public folder? What about using LESS?
The absolute simplest way is to drop the boostrap.css file into your public folder and then reference it in your layouts/application.html.erb file. Then you can start using it right away. You're a bit limited at that point in what you can modify but that will get you started.
What is your question about LESS? bootstrap uses LESS but you don't have to worry about that since you're just using a plain ole css file.
See this railscasts video: Twitter Bootstrap Basics. There is another follow-up screencast after you finish this one.
We converted bootstrap to use SASS (think I found it in a github repo somewhere), and included it in the lib/assets/ folder.
Our application.css includes the partials. We've made a few custom modifications to the partials, works just fine.
Version 2 will be converted to SASS pretty sure I'm sure, but in the meantime there are asset pipeline modules available for LESS which you could add so that your rails app understands less files:
A quick search found this (can't vouch for it at all)
https://github.com/metaskills/less-rails
If it works as described you could just drop in bootstrap as it is and reference it in your application.css file.

how to use ajax in rails3.1?

As we know, Rails 3.1 is using CoffeeScript and JQuery.
The old way that I handle the ajax request is respond the request to a template which name is some_action.js.erb
Now that we have CoffeeScript and I want my template could use coffeescript syntax.So what can I do?
Just changing the template file's suffix name?
some_file.js.coffee this works fine in the assets/javascript directory.
But I am handle the ajax request and its template is under the folder views,if just simply change the template name from some_action.js.erb to some_action.js.coffee.erb or some_action.js.coffee,it won't work,rails treat it like normal file and will not compile it from coffeescript syntax to normal javascript.
I am very sorry about my Enlgish ability,hope this time my question will explain my purpose.
Assuming you have upgraded to Rails 3.1, taking advantage of the new syntax is, like you suggested, as easy as converting your files over to CoffeeScript.
Now, you can't just name the file *.js.coffee and expect a conversion, but Ryan Bates at Railscasts recommends changing your files over manually as a great way of learning the syntax yourself. In fact, he has a screencast posted of him doing just that: http://railscasts.com/episodes/267-coffeescript-basics
Rails, then, will handle the compilation from js.coffee into .js for you.

Resources