使用 Ajax 的 Rails 嵌套表单

Question

我有一个有趣的问题，涉及 Rails 3 音乐应用程序中的对象创建步骤。

我有两个模型（不是实际模型；但为了简单起见）： 播放列表 歌曲

播放列表有_许多歌曲；歌曲属于播放列表。

每个播放列表对象必须具有准确数量的歌曲。每首歌曲必须属于一个播放列表。

鉴于此，我想创建一个创建播放列表的过程，该过程还涉及同时创建所有必要的歌曲。

另一件事是，要获取歌曲数据，用户输入一个查询（我不会将其保存在歌曲模型中），然后我使用该查询从 API 收集数据。这是应该用于制作 Song 对象的数据。因此，我不能（不认为？）使用传统的 form_for。

相反，我使用远程 form_tag。此表单要求进行查询，然后使用 Ajax 请求来获取数据，该数据被放入临时 Song 对象中，然后使用 Song 视图内联显示在播放列表创建页面上。此形式可重复用于播放列表中所有必需的 Song 对象。

因此，我们的想法是，当用户输入所需数量的查询（即将所需数量的歌曲添加到播放列表中）时，他们会看到一个新按钮，使他们能够提交播放列表信息并继续该过程。然后，将使用通过 Ajax 创建的所有 Song 对象作为子对象来创建播放列表。

事实上，我无法找到一种让它以优雅的方式工作的方法。虽然我通过 Ajax 创建了 Song 对象，但它们没有保存在任何地方，并且它们不知道应该将它们添加到哪个播放列表中（因为数据库中也不存在播放列表对象。）因此，当我进入下一步时，我没有所有的歌曲数据。我研究了使用带有 Accepts_nested_attributes_for 的嵌套表单，但我无法找到在我的设置中使用它的方法（使用 Ajax 的非基于模型的表单）。

所以，我陷入了困境。如果有人可以提供帮助，我们将不胜感激。

Answer 1

我以前遇到过类似的问题。根据记录，我从未发现远程标签有用，也从未最终将它们用于如此复杂的事情。你是对的——带有accepts_nested_attributes_for的嵌套表单就是为这种事情而设计的，而且肯定有一种方法可以让它发挥作用。

您需要做的是，在 Ajax 查询之后，使用 JavaScript 动态生成嵌套的 Song 字段。例如，假设您有：

<form...>
  <input type="text" name="playlist[name]" />
  <div class="songs">
  </div>
</form>

您希望 Ajax 回调执行类似的操作（我假设这里是 jQuery）：

<script type="text/javascript">
  $(function() {
    var songs = $('form .songs') // Store a reference to the DOM song container
    // Insert Ajaxy goodness for song lookup here.
    // When it's finished, it should call add_song and pass in any data it needs
  })

  function add_song(song_name, artist_name, artist_id) {
    var num_songs = $(songs).size()
    $(songs).append('<p>'+song_name+' by '+artist_name+
      '<input type="hidden" name="playlist[songs_attributes]['+num_songs+'][name]" value="'+song_name+'" />' +
      '<input type="hidden" name="playlist[songs_attributes]['+num_songs+'][artist_id]" value="'+artist_id+'" /></p>')
  }
</script>

那里发生的事情很少：

1. 字段名称“playlist[songs_attributes]...”说明了这一点Rails 认为该字段属于嵌套属性
2. “playlist[songs_attributes]...”之后的 num_songs 索引极其重要。相反，每首歌都必须是独一无二的，这一点非常重要。将其视为数组索引。因此，根据不断增加的歌曲列表的大小来确定它是完美的。 （在我看来，这是动态创建嵌套表单字段中最棘手和最不明显的部分。）

我的代码可能并不完美，而且我确信我无论如何都没有得到正确的字段名称。但这应该是一个好的开始。此外，在应用程序的开发日志中查看提交的表单数据对于调试这些内容非常有帮助。

Answer 2

以下是需要考虑的一些事项：

• 对于没有 JavaScript 可用的用户怎么办？ （我听说这些人存在。）
• 为什么要将播放列表创建过程与歌曲创建过程结合起来？创建播放列表作为自己的过程有什么问题吗？这样就可以保存播放列表。然后您可以创建歌曲（因为它需要从单独的 API 收集数据），因此可以保存歌曲。然后您可以将歌曲关联到播放列表。考虑在每一步保存用户的输入，这样如果他/她必须在中间停止，他/她就不会丢失所有现有数据。
• 如果您首先实现一个非 Ajax 接口，那么您可能会更容易将各个部分组合在一起来创建最终的 Ajax 接口。这样您就可以拥有所有必要的资源。 Ajax 就成为一种很好的粘合剂，这样就不会出现太多的页面刷新。