Rails看不到简单的Coffeescript

Question

I am following http://guides.rubyonrails.org/working_with_javascript_in_rails.html tutorial about jquery - I am trying to run the simplest thing suck as:

welcome.js.coffee

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor

and welcome index

<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>

this doesn't work too

<a href="#" onclick="paintIt(this, '#009900', '#FFFFFF')">Paint it green</a>

When I click it then color isn't changed. What I am doing wrong or what I didn't do ?

Answer 1

The best advice I can give is to firstly ensure the JS is being called, and then make it unobtrusive:

$("a").on "click", (e)->
    e.preventDefault()
    paintIt($(this), $(this).data("background"), $(this).data("foreground"))


<%= link_to "Paint It Red", "#", data: {background: '#990000', foreground: '#ffffff'} %>
<%= link_to "Paint It Green", "#", data: {background: '#009900', foreground: '#ffffff'} %>

Answer 2

Typically coffeescript output is wrapped in an anonymous function, so as not to pollute the global namespace. Your javascript should look like this:

(function() {
  var paintIt;

  paintIt = function(element, backgroundColor, textColor) {
    element.style.backgroundColor = backgroundColor;
    if (textColor != null) {
      return element.style.color = textColor;
    }
  };

}).call(this);

So it should NOT be working - the paintIt variable is inaccessible from onclick attributes. You would need to expose it to the window object for your example to work

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
#expose as global
window.paintIt = paintIt

I believe that is just a first step though. Next would be to make the js unobstrusive and setup eventhandlers from within coffeescript. And then there is no need to expose as a global.

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
# use DOMContentLoaded or jQuery's: $(document).ready()
document.addEventListener('DOMContentLoaded', ->
  #find <a> tags and setup event listeners
)