数字动态生成的茧字段

Question

我一直在使用Cocoon gem动态生成rails中的嵌套字段。我遇到了一个应用程序，我想用数字标记cocoon生成的字段;如下所示。

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

我想我可以通过编写自己的javascript来强制它，但有没有内置功能可以帮助我做到这一点？

非常感谢任何指导。

Answer 1

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

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

与以下CSS一起，每Field <idx>:之前会有.field。

.fields {
  reset-counter: idx;
}

.field {
  counter-increment: idx;
}

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

您不能将任何HTML直接放在content的值中，除此之外您可以根据需要设置“元素”的样式（最明显的是它的位置）。

Answer 2

我刚遇到同样的问题，基本上，你必须更新新插入字段的标签。我在这个问题中找到了答案：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)
 )

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