如何动态生成动态项目？

Question

我正在寻找一种使用javascript将元素附加到javascript的方法。 基本上我有两个项目清单。 一个带有“ ADD”按钮的项目列表（使用“ link_to_remote”），另一个带有“ REMOVE”按钮的项目列表（使用“ link_to_remote”）。 当我单击“添加”时，它将立即将该项目放到另一个列表中。 但是，我需要能够使新插入的项目对“删除”执行相反的操作。

我看不到任何方法（此外，也许创建局部渲染非对象）动态生成这种性质的动态项目。

Answer 1

您是否签出了jQuery ？ 这是一个流行的JavaScript库。 它可以轻松完成您所描述的事情。 我已经使用了多年，它从未让我失望。

文档的本页显示了append()方法。 你可以做...

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

$("span")部分正在查找DOM的一个或多个元素，然后appendTo("#foo")部分将其附加到DOM的另一个元素。

您还可以附加HTML的任意代码段。 如果需要，可以通过AJAX请求检索此代码段。 jQuery具有真正简单可靠的AJAX支持。

使用jQuery，基本概念是将JavaScript方法绑定到单独的.js文件中的DOM元素，而不是使用HTML的“ on_this ”或“ on_that ” on_that 。 因此，如果您在这种情况下使用jQuery，则不会考虑通过模板生成JS代码。 add()和remove()函数将在您的.js文件中准备就绪，您可以根据需要将其绑定和取消绑定到DOM元素。 例如，当您将li添加到列表中时，您将与li解除绑定add()函数，并将remove()函数绑定到该li 。

Answer 2

您可能正在寻找一些javascript模板解决方案。 检查此链接...

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

希望这能回答您的问题。

Answer 3

警告：hacky解决方案。

我有一个选择列表，我需要从中动态添加和删除元素。 两者都是AJAX调用。

控制器方法呈现包含Javascript的部分，以从选择列表中添加和/或删除项目。 局部文件（与其他任何局部文件一样，是一个普通的旧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%>

这与我合作，因为我可以使用会话变量。 不过要小心！ 在某些情况下，用户将使用相同的窗体创建各种窗口，这肯定会中断，因为会话变量上会存在并发访问。

缺少某些部分，因为我也对此进行了自动完成，但是我希望这会帮助您获得一个好主意。