jquery Rails 7中的Cocoon gem问题

62lalag4  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(81)

我想用cocoon gem实现嵌套表单。
没有错误,但当我点击项目链接编辑和触发它,什么都不起作用。但是,URL从http://127.0.0.1:3000/portfolios/2/edit更改为http://127.0.0.1:3000/portfolios/2/edit#。
我希望输入标记显示出来,但它没有。
查看
_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

我将cocoon gem添加到Gemfile并运行bundle install
另外,我在application.js中添加了//= require cocoon
当我点击添加技术时,什么也没有发生。
我将感激你的帮助。
谢谢

dvtswwa3

dvtswwa31#

你是否在Rails 7中使用了importmap?如果是这样,那么你需要改变包含JS的方式。
首先,在您的终端中,您将:

./bin/importmap pin @nathanvda/cocoon

然后,在你的JS中的某个地方,你会:

import "@nathanvda/cocoon"

PS -你还需要拉入jQuery,要么通过gem,要么再次使用importmaps。

kcwpcxri

kcwpcxri2#

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

yarn add @nathanvda/cocoon

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

import "@nathanvda/cocoon";

否则,cocoon gem需要jquery才能正常工作。
如果你使用StimulusJs(Rails 7中的默认js库),你可以试试这个gem rondo_form。它和Cocoon一样,但是使用Stimulus,不需要jQuery。

相关问题