0

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

我看不到动态生成这种性质的动态项目的方法（此外，可能创建一个部分来呈现非对象）。

4

4 回答 4

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”属性。所以如果你在这种情况下使用 jQuery，你就不会想到通过模板生成 JS 代码。add()and函数将remove()在您的.js文件中准备就绪，您可以根据需要将它们绑定和取消绑定到 DOM 元素。例如，当您将 an 添加li到列表中时，您将取消绑定您的add()函数li并将函数绑定remove()到它。

于 2009-07-05T18:11:39.150 回答
0

您可能正在寻找一些 javascript 模板解决方案。看看这个链接...

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

希望这能回答你的问题。

于 2009-07-05T04:51:22.733 回答
0

警告：hacky 解决方案。

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

控制器方法呈现一个包含 Javascript 的部分，以从选择列表中添加和/或删除项目。部分，它是一个普通的旧 erb 文件，与任何其他部分一样，插入适当的 DOM 标识符（从列表中对象的对象 ID 生成）。

我查看了一些 Javascript 模板解决方案，但没有一个足够灵活。最后，自己生成 Javascript 更容易。

于 2009-07-05T05:22:43.103 回答
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 回答