轨道茧嵌套形式：webpacker 找不到茧

Question

我使用cocoon-gem构建嵌套表单，因为我希望用户在"main_step"表单中填写他想要的"sub_step"。

这是我的代码：

MainStep模型

class MainStep < ApplicationRecord
belongs_to :user
has_many :sub_steps, inverse_of: :main_step
accepts_nested_attributes_for :sub_steps, reject_if: :all_blank, allow_destroy: true
end

SubStep模型

class SubStep < ApplicationRecord
belongs_to :main_step
end

sub_steps_controller

def index
@sub_step = SubStep.new
@main_step = current_user.main_step.last
end
def create
# runs after I submit the form
end

sub_steps/index.html.erb

<%= form_for @main_step do |f| %>
<%= f.fields_for @sub_step do |step| %>
<%= render 'sub_step_fields', :f => step %>
<% end %>
<%= link_to_add_association 'Add', f, :sub_steps %>
<% f.submit 'Confirm' %>
<% end %>

sub_step/_sub_step_fields.html.erb

<div class='nested-fields'>
<div class="field">
<%= f.label :created_at %>
<%= f.text_field :created_at %>
</div>
<%= link_to_remove_association "Remove", f %>
</div>

当我加载表单所在的页面时，单击"添加"按钮时不会发生任何事情。通过检查日志，我注意到webpacker找不到茧宝石，所以表单没有按预期工作。

我使用的是Rails 6.0.2，谢谢。

Answer 1

经过更多的研究，我最终来到了这里：https://github.com/nathanvda/cocoon/pull/454

对我有用的是：

yarn add cocoon-js

然后添加到我的应用程序.js

import 'cocoon-js';

Answer 2

命令yarn add cocoon-js从以下源下载js包：

https://www.npmjs.com/package/cocoon-js

让茧在Rails6+:上工作

1. Gemfile：

gem 'cocoon'

2. 控制台

bundle

yarn add cocoon-js

3. 需要app/javascript/packs/application.js中的茧

import "cocoon-js";

附言：这里有一个香草js的替代新库https://www.npmjs.com/package/cocoon-js-vanilla