0

JavaScriptを使用してJavaScriptで要素を追加する方法を探しています。基本的に、アイテムのリストは 2 つあります。1 つは「追加」ボタン (「link_to_remote」を使用) のある項目のリストで、もう 1 つは「削除」ボタン (「link_to_remote」を使用) のある項目のリストです。「追加」をクリックすると、アイテムがすぐに他のリストに配置されます。ただし、新しく挿入されたアイテムが「削除」の逆のアクションを実行できるようにする必要があります。

この性質の動的アイテムを動的に生成する方法はありません (おそらく、非オブジェクトをレンダリングするためにパーシャルを作成する方法はありません)。

4

4 に答える 4

1

jQueryをチェックアウトしましたか? 人気のある JavaScript ライブラリです。まさにあなたが説明したことを簡単に行うことができます。私は何年もそれを使用してきましたが、決して私を失望させたことはありません.

ドキュメントのこのページにappend()メソッドが示されています。次のようなことができます...

$("span").appendTo("#foo");

パーツは DOMの$("span")要素 (または複数の要素) を見つけ、それappendTo("#foo")を DOM の別の要素に追加します。

HTML の任意のスニペットを追加することもできます。必要に応じて、このようなスニペットは AJAX リクエストを介して取得できます。jQuery は、非常にシンプルで信頼性の高い AJAX サポートを備えています。

jQuery の基本的な概念は、HTML の " " または " ".js属性を使用するのではなく、JavaScript メソッドを別のファイルの DOM 要素にバインドすることです。したがって、この状況で jQuery を使用した場合、テンプレートを介して JS コードを生成するという観点から考えることはありません。関数と関数はすぐに使用できるファイルにあり、必要に応じてそれらを DOM 要素にバインドおよびバインド解除します。たとえば、をリストに追加した場合、関数を からバインド解除し、関数をそれにバインドします。on_thison_thatadd()remove().jsliadd()liremove()

于 2009-07-05T18:11:39.150 に答える
0

警告：ハッキーな解決策。

要素を動的に追加および削除する必要がある選択リストがあります。どちらも AJAX 呼び出しです。

コントローラー メソッドは、Javascript を含むパーシャルをレンダリングして、選択リストから項目を追加および/または削除します。パーシャルは、他のパーシャルと同様に単純な古い erb ファイルであり、適切な DOM 識別子 (リスト内のオブジェクトのオブジェクト ID から生成されます) を挿入します。

Javascript のテンプレート ソリューションをいくつか見ましたが、どれも十分に柔軟ではありませんでした。結局、自分で Javascript を生成する方が簡単でした。

于 2009-07-05T05:22:43.103 に答える
0

JavaScript テンプレート ソリューションを探しているかもしれません。このリンクをチェックしてください...

http://www.hokstad.com/mini-reviews-of-19-ruby-template-engines.html

これがあなたの質問に答えることを願っています。

于 2009-07-05T04:51:22.733 に答える
0

これはかなり簡単です。あなたのためにこれを行うものがたくさんあります（jqueryをチェックしてください）。

少し前に何かを手作業でコーディングしました (コードの書き方が悪くて申し訳ありません)。プレイリストからトラックを追加および削除します

コントローラ：

def add_track
    unless session[:admin_playlist_tracks].include?(params[:recording_id])
      session[:admin_playlist_tracks] << params[:recording_id]
    end
    render :partial => "all_tracks"
  end

  def remove_track
    session[:admin_playlist_tracks].delete_if {|x| x.to_s == params[:recording_id].to_s }
    render :partial => "all_tracks"
  end

容器：

<div id="artist_recordings" class="autocomplete_search"></div>

追加のもの：

<%= link_to_remote  "Add", 
                                :url => {:controller => :playlists, :action => :add_track, :recording_id => recording.id}, 
                                :update =>"all_tracks",
                                :complete => visual_effect(:highlight, 'all_tracks') %>

ものの表示/削除:

<%session[:admin_playlist_tracks].each do |recording_id|%>
        <div style="margin-bottom:4px;">
            [<%=link_to_remote "Remove", 
                                    :url => {:controller => :playlists, :action => :remove_track, :recording_id => recording_id}, 
                                    :update =>"all_tracks"%>]
            <%recording = Recording.find_by_id(recording_id)%>                      
            <%=recording.song.title%> <br />
            by  <%=recording.artist.full_name%> (<%=recording.release_year%>)
        </div>                  
    <%end%>

セッション変数を使用できるため、これでうまくいきました。しかし、注意してください！ユーザーが同じフォームでさまざまなウィンドウを持つ場合、セッション変数に同時アクセスがあるため、これは確実に壊れます。

これについてもオートコンプリートを行っているため、不足している部分がいくつかありますが、これが大きなアイデアを得るのに役立つことを願っています.

于 2009-07-06T21:20:24.930 に答える