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 のプロジェクト レールにこのコードを入力すると、うまく動作しません。

ブラウザ コンソールに次のエラーが表示されます。

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のexportsオブジェクトにアタッチします。存在演算子(以下で説明) を使用すると、それらを追加する場所を特定する信頼できる方法が得られます。CommonJS とブラウザーの両方をターゲットにしている場合:exports ? this

于 2012-05-07T15:03:55.327 に答える