Question

我有一个Rails应用程序，其中我有一个看起来像这样的表单：

[ Parent list item 1 ]
[ Parent list item 2 ]
[ Parent list item 3 - expanded ]
    [ Child list item 1 ]
    Child inline input       Child submit button
    ------------------

[Parent input]
Parent submit button

父实体输入始终有效。它是一个使用remote: true的远程表单。当我添加父对象时，它会自动添加到包含其他父对象的列表中。每个父级可以有多个子级，当用户展开相应的父级列表项时，它们会被显示和列出（如上例所示）。用户可以通过在Child inline input中输入值来添加更多子项，此表单也使用remote: true。

我遇到的问题是添加子元素并不总是在第一页加载时起作用。但是，如果我刷新页面，它会工作。我很难理解为什么会这样。

当我创建父对象时，将呈现以下js.erb：

# screen_table_id is the list with parent objects.
# localized_strings/localized_string is the tr with the object
$("#screen_table_<%= @localized_string.screen.id %>").append("<%= j render   partial: 'localized_strings/localized_string', locals: { screen:  @localized_string.screen, localized_string: @localized_string }  %>");

# I use the best in place gem to manage inline editing
jQuery('.best_in_place').best_in_place()

localized_strings/localized_string的相关部分如下所示：

%tbody{ id: "localized_string_parent_#{localized_string.id}"}
  %tr
    %td.expandable-column
      Clicking this reveals the child objects

/ The list of children is initially hidden
%tbody.hidden[localized_string]

  - if localized_string.translations.any?
    / Renders the children
  %tr
    / This form doesn't work on page load, after I have added the parent
    = render "translations/inline_form", app: localized_string.screen.app,  screen: localized_string.screen, localized_string: localized_string, translation:  localized_string.translations.build

translations/inline_form看起来像这样：

= form_for [app, screen, localized_string, translation], remote: true do |f|
  %td{ colspan: 2 }
    .inline-form-group
      = f.text_field :value, class: "form-control inline-form-control",  placeholder: "Translation value", id: "localized_string_input_# {localized_string.id}"

  %td
    / Sometimes nothing happens when I click Submit.
    = f.submit 'Add translation', class: "btn ban-success-outline"

错误的流程如下所示：

页面加载，我创建了一个父对象（LocalizedString）
它会正确添加到列表中。
扩展新的父列表元素按预期工作。
点击孩子的提交按钮（Translation）时nothing。

希望我的问题是可以理解的。如果您有任何意见或需要澄清，请发表评论。我很满意所有的想法。

Answer 1

Ryan Bates在这个主题Nested Model Form Part 2上做了很棒的Railscast。根据您的路由和模型关联，存在许多交互依赖关系，但此RailsCast看起来可直接应用。

Answer 2

我很确定我的问题是由无效的HTML引起的。我之前在tr标记内呈现了表单，如下所示：

%tr
  = render "translations/inline_form", app: localized_string.screen.app,   screen: localized_string.screen, localized_string: localized_string, translation:   localized_string.translations.build

inline_form以form本身开头。而不是像我那样尝试将其包装在td标签内，如下所示：

# inline_form.html.haml
%td{ colspan: 4 }
  # the form wasn't previously inside a td tag.
  = form_for [app, screen, localized_string, translation], remote: true,  style: "margin-bottom: 0" do |f|

此后我还没有再看到这个问题。但我不能100％确定它是解决方案，因为问题有点随机出现。

Rails：嵌套的远程表单在页面加载时不起作用

2 个答案: