从调用咖啡脚本定义的函数<script> in html?

Question

I have a rails app and I am rewriting all my JS in CoffeeScript just to check it out.

I understand CoffeeScript compiles to JS but I am having trouble with something.

I am using Google Maps API and I have a script tag in one of my html.erb files as follows:

<script>
initialize()
</script>

Now my initialize used to work because it was just written in javascript, but now that I have a coffeescript function instead the browser console says:

"Uncaught ReferenceError: initialize is not defined"

I put this at the bottom of the coffeescript file after the function definition, but still no dice.

window["initialize"] = initialize

Answer 1

This really does not have anything to do with CoffeeScript vs JS. But is rather due to the fact that your inline script is run before the external file which declares window.initialize is run.

Its widely accepted that inline script tags are a bad practice. So start out by getting rid of it.

This is an example of how you can use the google loader & jQuery.Deferred instead of a global callback function:

jQuery(function(){
  var apiLoaded = jQuery.Deferred();
  var mapInit = jQuery.Deferred();
  var $map_canvas = $('#map_canvas');

  if ( $map_canvas.length ) {
    google.load("maps", "3", { other_params:'sensor=false', callback: function(){
      apiLoaded.resolve(google);
    }});

    apiLoaded.done(function(g){
      var map = new g.maps.Map($map_canvas[0],{
          center: new google.maps.LatLng(63.399313, 13.082236),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      mapInit.resolve(map);
    });

    mapInit.done(function(map){
      // do something with the map!
    });
  }
});

In case you are not using jQuery or the loader you need to use polling to check if the google maps API is loaded:

function init(gmaps){
    // do something with the maps api...
}

function isLoaded(){
  if (!window.google){
    window.setTimeout(function(){ isLoaded() }, 10);
  } else {
     init(window.google.maps);
  }
}