1

これを理解しようとして私の車輪を回転させます。クリックするとサーバーからフォームを取得するリンクがあります。フォームには3つのボタンと1つのテキスト入力があります。サーバーからフォームが返された後、非送信ボタンがJSに応答するようにしようとしています。

ajax:successが呼び出そうとしているlists.jsに関数を作成しましたが、正しく実行していません。私はlists.jsで関数をテストしましたが、それが機能することはわかっていますが、正しく呼び出していません。

関連するファイルは次のとおりです。showPicturePicker関数をアクティブにして、AJAX応答が挿入された後に使用できるようにするにはどうすればよいですか?

Lists.js

$("#new_list")
    .bind "ajax:success", (evt, xhr, settings) -> 
        $("#list-item").html(xhr)
        showPicturePicker

showPicturePicker = () ->
    $('#picture').click (e) ->
        e.preventDefault()
        alert "yeah, you figured it out"

$(document).ready showPicturePicker

_new.html.haml(サーバーから返されたフォーム)

= form_for [@list, @item], :remote => true, :html => {:class => 'form-inline'} do |f|
  .input-append
    = f.text_field "name", :class => 'input-large', :placeholder => "Add item to this list"
    %button#picture.btn
      %span.icon-camera
    %button#link.btn{:style => "font-size: 10px;"} 
      http://
  .secondary-fields{:style => "display: none"}  
    .field.margin
      = f.text_field "link", :placeholder => "http://www.link.com", :style => "width: 325px"
    .field.margin
      = f.file_field "picture"
      = f.hidden_field "picture_cache"
  .clearfix
    = link_to "blah", "#{}", :class => "fuck-me"
  = f.submit "Add Item", :class => 'btn', :id => "add-item"

これは私が他の場所でも解決する必要がある問題であり、私は助けに感謝します。

4

1 に答える 1

0

application.jsはIIFE(即時呼び出し関数式)でラップされ、そこで定義された変数は、グローバルスコープで明示的に使用可能にしない限り(ウィンドウまたは他のオブジェクトにアタッチすることによって)、他のファイルに表示されません。

application.jsで、次のことを試してください。

@showPicturePicker = ->
    ...
# or window.showPicturePicker = ->

"わかりやすくするためにこのドキュメントでは省略されていますが、すべてのCoffeeScript出力は無名関数でラップされています:(function(){...})();この安全ラッパーとvarキーワードの自動生成を組み合わせると、非常に困難になります。誤ってグローバル名前空間を汚染すること。」

http://coffeescript.org/#lexical_scope

于 2013-03-04T02:10:53.900 に答える