Кокон добавить ассоциацию, как ограничить количество ассоциаций

Question

Я создаю систему, которая хранит карты, используя Ruby/Rails/HAML - в этом случае есть класс Card, который имеет много цветов (это также класс). При создании и редактировании карты я использую драгоценный камень Cocoon, чтобы позволить мне динамически добавлять цветовые ассоциации.

Проблема, с которой я сталкиваюсь, заключается в том, что в модели карты максимальная вместимость карты - 5 цветов. Тем не менее, интерфейс позволяет добавлять неограниченное количество цветов, что приводит к ошибке.

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

Это код формы для добавления / редактирования карты

 = simple_form_for @card, multipart: true do |c|
  = c.input :name, label: "Name of the card"
  = c.input :cost, label: "Cost of the card"
  #colours
   = c.simple_fields_for :colours do |colour|
    = render "colour_fields", f: colour
   .links
    = link_to_add_association 'add colour', c, :colours

И это форма colour_fields

.nested-fields
 = f.input :value, as: :select, collection: Colour::VALUES, selected: f.object.value, include_blank: false
 = link_to_remove_association "remove colour", f

Заранее спасибо.

Answer 1

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

Аналогично, при загрузке страницы делайте то же самое.

Так в коде это будет выглядеть так:

 $(function() {
   function check_to_hide_or_show_add_link() {
     if ($('#colours .nested-fields:visible').length == 5) {
       $('#colours .links a').hide();
     } else {
       $('#colours .links a').show();
     }
   }

   $('#colours').on('cocoon:after-insert', function() {
     check_to_hide_or_show_add_link();
   });

   $('#colours').on('cocoon:after-remove', function() {
     check_to_hide_or_show_add_link();
   });

   check_to_hide_or_show_add_link();     
 });

Нечто подобное должно работать. Обратите внимание, этот код не проверен:)

Надеюсь это поможет.

Answer 2

У меня была похожая задача, и в итоге я поставил onclick событие по ссылке "Добавить". это onclick Событие будет выполнено перед выполнением кода для добавления полей.

В вашем случае код будет выглядеть примерно так:

= link_to_add_association 'add colour', c, :colours, class: 'add-colour-link'

Тогда в вашем JavaScript (CoffeeScript в этом случае):

$('.add-colour-link').on 'click', (e) ->
   if $('#colours .nested-fields:visible').size() < 5
     return true #continue the execution 
   else
     #maybe display the modal to the user that only a maximum of 5 is allowed
     return false #prevent further execution