Rails 7中的Cocoon-gem问题

Question

我想使用cocoon-gem实现嵌套表单。

没有错误，但当我点击项目链接编辑并触发它时，什么都不起作用。但是，URL来自http://127.0.0.1:3000/portfolios/2/edit到http://127.0.0.1:3000/portfolios/2/edit#.

我希望input标记会显示，但它没有。

查看

_form.html.erb

<div class="form-group mb-3">
<h2>Technologies used: </h2>
<div>
<%= form.fields_for :technologies do |technology_form|%>
<%= render 'technology_fields', f: technology_form %>
<% end %>
<div>
<%= link_to_add_association 'Add Technology', form, :technologies %>
</div>
</div>
</div>

_technolog_fields.html.erb

<div class="form-group mb-1 nested-fields">
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
</div>

型号

投资组合模型

class Portfolio < ApplicationRecord
has_many :technologies
accepts_nested_attributes_for :technologies,
reject_if: ->(attrs) { attrs['name'].blank? }

end

我将co茧宝石添加到Gemfile并运行捆绑包安装

另外，我添加//=需要茧来应用.js

当我点击添加技术时，什么都不会发生。

我会感谢你的帮助。

谢谢。

Answer 1

您在Rails7中使用importmap吗？如果是这样，那么您将需要更改包含JS的方式。

首先在你的终端你会：

./bin/importmap pin @nathanvda/cocoon

然后，在JS的某个地方，你会：

import "@nathanvda/cocoon"

PS-您还需要通过gem或者再次使用importmap来引入jQuery。

Answer 2

首先，您需要安装js依赖项

yarn add @nathanvda/cocoon 

然后，将其导入javascript/application.js

import "@nathanvda/cocoon";

否则，cocoon-gem需要jquery才能正常工作
如果您使用StimulusJs(Rails 7中的默认js库(，您可以尝试这个gem-rondo_form。它与Cocoon相同，但使用Stimulus，不需要jQuery。