0

私は基本的に、WordPress の「メディア」セクションが機能するのと同様に、Rails アプリ用のファイル マネージャーを作成しようとしています。Asset私は現在、ユーザーがさまざまな画像をアップロードする場所と呼ばれるモデルを持っています。他のさまざまなモデルでは、単なるテキスト フィールドである画像用のフィールドがあります。ユーザーがテキスト フィールドをクリックすると、モーダル ウィンドウに「アセット マネージャー」が開き、すべての画像が表示されることを期待していますAsset。ユーザーがいずれかの画像をクリックすると、モーダルが閉じ、選択した画像の URL がテキスト フィールドに入力されます。

Events私が話していたテキストフィールドを含むというモデルがあります。アクションでは、newjs に応答します。モーダル ウィンドウ内のすべてのアセットを含むパーシャルを読み込みます。期待どおりです。私の唯一の問題は、$.getScript呼び出しを介してこれを行っており、追加の JavaScript を呼び出して画像の URL をテキスト フィールドにロードできないことです。オブジェクトがまだ存在しないためだと思います。とにかく、コードに：

コントローラ

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end

new.js

$('.acontainer').html('<%= render @asset %>');

page.js

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});

特に誰かがこれを行うためのより良い方法を知っている場合は、どんなアイデアでも大歓迎です。:-)

4

2 に答える 2

2

.image-field.

一般に、jQuery.onを使用して、イベントをドキュメント ルートにバインドする必要があります。これは委任と呼ばれます。リンクをクリックすると、イベントが発生してドキュメント ノードにヒットし、イベントが処理されます。このように、ajax を介して、または DOM に直接 DOM 要素を追加すると、意図したイベント ハンドラーを引き続き取得できます。

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});

ただし、ここにはもっと大きな問題があります。ページに複数の .image-field 要素があるようです。.image-field ハンドラーで行う必要があるのは、js ではなく HTML を返すことです。これにより、新しく追加された HTML のルート要素にイベントをバインドできます。そのブロックは特定の入力フィールドを識別し、画像がクリックされるとその値を設定できます。

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});

最後に、アセットに RESTful コントローラーを使用することを検討してください。特に編集アクションを使用して、EventsController という名前のコントローラーから 1 つのリソース (アセット) を取得したくない場合があります。GET AssetsController::index でアセットのリストを返す必要があります。

于 2012-03-14T03:09:20.067 に答える
1

".acontainer img"の最初のクエリで要素が返されず、イベント ハンドラーが何も関連付けられていないため、画像をクリックしても何も起こりません。それらはまだロードされていません。

jQuery のliveメソッドを試してみてください。ページの読み込み時に存在する要素と、後で DOM に追加される要素にハンドラーをアタッチします。

更新: @aceofspades が指摘しているようにlive、jQuery 1.7 では非推奨です。on代わりに使用してください。

于 2012-03-14T03:09:56.743 に答える