1

这个 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]">
4

1 回答 1

6

默认情况下，所有方法都在 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关键字的自动生成相结合，使得意外污染全局命名空间变得极其困难。

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

于 2012-05-07T15:03:55.327 回答