Javascript Summernote编辑器不使用嵌套表单

我正在尝试在我的ruby on rails应用程序中使用cocoon gem和summernote gem。
这是我的模型：

class Dog < ApplicationRecord
    has_many :pictures, as: :imageable, dependent: :destroy
    accepts_nested_attributes_for :pictures, reject_if: :all_blank, allow_destroy: true
end

class-Dog

乍一看，新建或编辑页面似乎没问题。第一个摘要字段正确使用summernote进行渲染。如果我已经有几张图片保存到我的狗模型中，它们在编辑页面上看起来都很好。 但是，当我点击“添加图片”时，它会创建一个新的图片字段，其中的摘要字段不能用summernote正确呈现。在html页面中，它如下所示：

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1544609860934_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1544609860934][summary]" id="dog_pictures_attributes_1544609860934_summary"></textarea>
</div>

总结

与此相反：

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1][summary]" id="dog_pictures_attributes_1_summary" style="display: none;"></textarea>
    <div class="note-editor note-frame">...</div>
</div>

总结
...

这是我的表格。erb:（如果相关）

添加图片
图片%>

这是我的图片字段。erb:

<div class='nested-fields'>
  <div class="field">
    <%= f.file_field :image %>
  </div>
  <div class="field">
    <%= f.label :author %>
    <%= f.text_field :author %>
  </div>
  <div class="field">
    <%= f.label :summary %>
    <%= f.text_area :summary, 'data-provider': :summernote %>
  </div>
    <%= link_to_remove_association "remove picture", f %>
</div>

---

我还试着用它从头开始构建嵌套表单。但是它会导致相同的问题

当动态地将项目插入页面时，您还必须对这些项目初始化summernote编辑器。Cocoon具有回调，允许您执行此操作

加载页面时，要初始化summernote，您可以执行以下操作

$('[data-provider="summernote"]').each ->
    $(this).summernote

（复制自summernote rails gem文档）

但这只适用于已经在页面上的“summernote”，它无法初始化尚未在页面上的注释

因此，在插入嵌套项之后，我们必须使用相同的代码初始化插入的注释。像这样的方法应该会奏效：

$('form').on('cocoon:after-insert', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

这将在新嵌套的项目中查找summernote项目并初始化这些项目

[编辑：改进javascript以从视图中提取]

Javascript文件通常分组在

app/assets/javascripts

中，如果您正在编辑

Dog

s，让我们添加一个新文件

dogs.js

，并输入以下代码：

$(document).on('cocoon:after-insert', 'form', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

然后使用

requiredogs

将此文件添加到您的

application.js

---

此代码在文档上注册一个事件处理程序，它将在插入

表单上触发的
事件后侦听任何
cococoon:。如果您有多个使用cocoon的表单，您可能需要一个更好/更精确的css选择器（例如，向表单添加一个类，并将其添加到表单中）
 我是这么认为的，但我认为这不是最好的解决办法？（但很有效！非常感谢）呜！它起作用了！您可以在视图中保留javascript，但实际上，现在我们尝试将javascript与视图分开，但是您可能需要编写稍微不同的代码。我将相应地编辑我的答案。
$(document).on('cocoon:after-insert', 'form', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});