Question

这个jquery代码以jquery格式对我很好。

我想将此jquery代码转换为coffeescript代码：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {  
      $('.preview_browse img#thumb').attr('src', e.target.result).width(251).show();
    };
    reader.readAsDataURL(input.files[0]);
    $('.not_found_image_browse').hide();
  }
}

我从http://js2coffee.org/获得此代码：

readURL = (input) ->
  if input.files and input.files[0]
    reader = new FileReader()
    reader.onload = (e) ->
      $(".preview_browse img#thumb").attr("src", e.target.result).width(251).show()
    reader.readAsDataURL input.files[0]
    $(".not_found_image_browse").hide()

但是当我在post.js.coffee中的项目rails中输入此代码时，对我来说效果不佳。

我在浏览器控制台中遇到此错误：

readURL is not defined
onchange()onchange (line 2)
event = change
[Break On This Error]   
readURL(this);

这是我的输入文件中的html代码：

<input id="post_image" class="file required" type="file" onchange="readURL(this)" name="post[image]">

Answer 1

默认情况下，所有方法都在coffeescript的闭包中定义，因此您必须将方法或对象显式放入窗口的上下文中，以便从输入的onchange属性中看到它：

window.readURL = (input) ->
  if input.files and input.files[0]
    reader = new FileReader()
    reader.onload = (e) ->
      $(".preview_browse img#thumb").attr("src", e.target.result).width(251).show()
    reader.readAsDataURL input.files[0]
    $(".not_found_image_browse").hide()

来自http://coffeescript.org/

虽然为了清楚起见在本文档中进行了限制，但所有CoffeeScript输出都包含在一个匿名函数中：(function(){ ... })();此安全包装器与自动生成var关键字相结合，使得污染非常困难意外的全局命名空间。

如果您要为其他要使用的脚本创建顶级变量，请将它们作为属性添加到窗口或CommonJS中的 exports 对象上。 存在运算符（如下所述）为您提供了一种可靠的方法来确定添加它们的位置;如果您同时定位CommonJS和浏览器：exports ? this

将jquery代码转换为coffeescript代码时出错

1 个答案: