为动态生成的茧田编号

Question

我一直在使用 Cocoon gem 在 rails 中动态生成嵌套字段。我已经运行进入一个应用程序，我想在其中用数字标记 cocoon 生成的字段；如下所示。

Field 1: __________
Field 2: __________
Field 3: __________

我想我可以通过自己编写 javascript 来暴力破解它，但是是否有内置功能可以帮助我做到这一点？

非常感谢任何指导。

Answer 1

我刚遇到同样的问题，基本上，您必须更新新插入字段的标签。我在这个问题中找到了答案：Update field inside fields_for with Cocoon and Jquery

我所做的是将此添加到我的 coffeescript 文件中：

$('#fields').on('cocoon:after-insert', (e, inserted_item) ->
  num = $('.fields').length
  inserted_item.find('.field-label').html('Field #'+num)
 )

如果您删除任何字段，您还必须编辑标签，但我尚未处理该问题。

Answer 2

您不一定需要 JavaScript。根据您的标记，您可以包装嵌套字段并使用 CSS 计数器来实现编号。如果您删除一些项目，它还会自动重新编号。考虑这个 HTML:

<div class="fields">
  <div class="field">Nested fields</div>
  <div class="field">Nested fields</div>
</div>

连同后面的CSS，每个.field前会有Field <idx>:。

.fields {
  reset-counter: idx;
}

.field {
  counter-increment: idx;
}

.field:before {
  content: "Field " counter(idx) ":";
}

您不能将任何 HTML 直接放在 content 的值内，但除此之外您可以根据需要设置 "element" 的样式（最显着的是它的位置）。

Number Dynamically Generated Cocoon Fields