Rails cocoon 嵌套形式：webpacker 找不到 cocoon

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_steps/_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>

当我加载表单所在的页面时，单击 'Add' 按钮时没有任何反应。通过检查日志，我注意到 webpacker 无法找到 cocoon gem，因此表单无法正常工作。

我正在使用 Rails 6.0.2，谢谢。

Answer 1

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

对我有用的是：

yarn add cocoon-js

然后添加到我的application.js

import 'cocoon-js';

Answer 2

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

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

让茧在 Rails 6+ 上工作：

宝石文件：

gem 'cocoon'

控制台

bundle

yarn add cocoon-js

在app/javascript/packs/application.js

import "cocoon-js";

P.S。这是一个带有 vanilla js https://www.npmjs.com/package/cocoon-js-vanilla

的替代新库

Rails cocoon 嵌套形式：webpacker 找不到 cocoon

Rails cocoon nested form: webpacker can't find cocoon

ruby-on-rails

webpacker

cocoon-gem