ruby-on-rails - 使用 Ajax 的 Rails 嵌套表单

Question

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

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

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

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

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

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

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

因此，我们的想法是，当用户输入所需数量的查询(即将所需数量的歌曲添加到播放列表中)时，他们会看到一个新按钮，使他们能够提交播放列表信息并继续的过程。然后，将使用通过 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 索引非常重要。相反，每首歌都必须是独一无二的，这一点非常重要。将其视为数组索引。因此，根据不断增加的歌曲列表的大小来确定它是完美的。 (在我看来，这是动态创建嵌套表单字段中最棘手和最不明显的部分。)

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