動的アイテムを動的に生成するにはどうすればよいですか？

Question

javascriptを使用してjavascriptで要素を追加する方法をお探しです。基本的に私は2つの項目のリストを持っています。 1つは "ADD"ボタン（ "link_to_remote"を使用）を持つ項目のリストを持ち、もう1つは "REMOVE"ボタン（ "link_to_remote"を使用）を持つ項目のリストを持っています。 「追加」をクリックすると、すぐにそのアイテムが他のリストに配置されます。しかし、私は、新しく挿入されたアイテムに "REMOVE"の逆のアクションを実行させる必要があります。

このような動的なアイテムを動的に生成する方法はありません（さらに、非オブジェクトをレンダリングするために部分的に作成する）。

Answer 1

jQueryをチェックしましたか？これは一般的なJavaScriptライブラリです。あなたが簡単に説明したことを正確に行うことができます。私は何年もそれを使ってきました。

This page of the documentationは、append()の方法を示す。あなたが好きなものを行うことができます...

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

$("span")一部はその後appendTo("#foo")部分はDOMの別の要素にそれを追加され、DOMの要素（または要素）を見つけることです。

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

、基本的な概念ではなく、HTML「on_this」または「on_that」attibutesを使用するよりも、あなたは別の.jsファイル内のDOM要素にJavaScriptのメソッドを結合することです。したがって、このような状況でjQueryを使用した場合、テンプレートを使用してJSコードを生成することは考えられません。 add()とremove()の機能はあなたの.jsファイルにあり、必要に応じてDOM要素にバインドしてアンバインドします。たとえば、liをリストに追加した場合、add()機能をliからバインド解除し、remove()機能をバインドします。

Answer 2

JavaScriptのテンプレートソリューションを探している可能性があります。このリンクをチェックアウト...

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

希望これは、あなたの質問に答えます。

Answer 3

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

要素を動的に追加および削除するために必要な選択リストがあります。どちらもAJAXコールです。

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

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

Answer 4

これはかなり簡単です。あなたのためにこれをやっているものがたくさんあります（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%> 

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

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