如何動態生成動態項目？

Question

我正在尋找一種方法來使用javascript來添加JavaScript元素。基本上我有兩個項目清單。其中一個列表中帶有「ADD」按鈕的項目（使用「link_to_remote」），另一個列表中包含具有「REMOVE」按鈕的項目列表（使用「link_to_remote」）。當我點擊「添加」時，它立即將該項目放入另一個列表中。但是，我需要能夠讓新插入的項目執行「REMOVE」的反向操作。

我認爲沒有辦法（此外，也許創建一個局部呈現非對象）動態生成這種性質的動態項目。

Answer 1

你簽出了jQuery？這是一個流行的JavaScript庫。它可以完全按照您所描述的方式進行。我已經使用了它多年，它永遠不會讓我失望。

This page of the documentation顯示了append()方法。你可以做的東西一樣......

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

的$("span")部分是找到DOM的元素（或要素），那麼appendTo("#foo")部分被追加到DOM的另一個元素。

您還可以追加任意的HTML片段。如果需要，可以通過AJAX請求檢索這樣的片段。 jQuery有非常簡單和可靠的AJAX支持。

使用jQuery，基本概念是，你綁定JavaScript方法DOM元素在一個單獨的.js文件，而不是使用HTML「on_this」或「on_that」 attibutes。所以，如果你在這種情況下使用jQuery，你不會考慮通過模板生成JS代碼。 add()和remove()函數將在您的.js文件中準備就緒，您可以根據需要將它們綁定到DOM元素並將其解除綁定。例如，當您將一個li添加到列表中時，您可以從li中解除您的add()函數的綁定並將remove()函數綁定到該函數。

Answer 2

您可能正在尋找一些JavaScript模板解決方案。檢查此鏈接了...

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

希望這回答了你的問題。

Answer 3

警告：hacky解決方案。

我有一個選擇列表，我需要動態地添加和刪除元素。這兩個都是AJAX調用。

控制器方法呈現包含Javascript的部分，以便從選擇列表中添加和/或刪除項目。與其他任何部分一樣，部分是一個普通的舊erb文件，插入適當的DOM標識符（它是從列表中的對象的對象標識生成的）。

我看了幾個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%> 

這個曾與我，因爲我可以用會話變量。不過要小心！在某些情況下，用戶將擁有相同表單的各種窗口，這將肯定會中斷，因爲會話變量會有併發訪問。

有一些部分丟失，因爲我在這方面做了一些自動完成，但我希望這會幫助您獲得大的想法。