Количество динамически сгенерированных полей кокона

Я использую гем Cocoon для динамического создания вложенных полей в рельсах. Я столкнулся с приложением, в котором я хотел бы численно пометить поля, созданные коконом; примерно следующим образом.

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

Я полагаю, что могу переборщить, написав свой собственный javascript, но есть ли встроенная функция, которая поможет мне это сделать?

Большое спасибо за любое руководство.


ruby-on-rails ruby-on-rails-4 nested-forms cocoon-gem
person neanderslob    schedule 19.01.2015    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вам не обязательно нужен 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, но кроме этого вы можете стилизовать «элемент» так, как хотите (в первую очередь его положение).

person Jiří Pospíšil    schedule 19.01.2015
comment
Отличный ответ чувак. Я понятия не имел, что CSS имеет эту функцию! - person neanderslob; 20.01.2015

arrow_upward
1
arrow_downward

У меня была такая же проблема, в основном, вам нужно обновить метку вновь вставленного поля. Я нашел ответ на этот вопрос: Поле обновления внутри fields_for с помощью Cocoon и Jquery

Что я сделал, так это добавил это в свой файл coffeescript:

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

Вам также придется отредактировать метку, если вы удалите какое-либо из полей, но я еще не занимался этой проблемой.

person Angela Mancini    schedule 19.01.2015