Question

我的模型Clasification有两个Category。每个类别都有words。我正在制作form_for @clasification，您可以使用两个嵌套categories修改它及其words及其各自的fields_for。

屏幕由分类字段和两个填充项目（单词）的列表（类别）组成。在那里，您可以在列表之间拖放项目以将它们分配给另一个。

我需要一个“新项目”按钮，我想在第三列中呈现空白Word，然后将其放入所需的Category，但我无法弄清楚如何做它

拖放功能基于SortableJS库。

这是我的代码。

_word.html.slim

= builder.fields_for :words, builder.object.words do |word_builder|
  .clasification-word
    = word_builder.text_field :word, placeholder: "Texto"
    = word_img(word_builder.object)
    = word_builder.hidden_field :category_id
    = word_builder.hidden_field :_destroy*

form.html.slim

.dialogo-main
  = form_for [@book, @clasification], remote: true do |f|
    .dialogo-content
      .column.column--left
        = f.text_field :title, placeholder: true, class: 'clasification-title-input'
        = f.text_area :description, placeholder: true, class: 'clasification-description-input'
        = f.fields_for :result do |fff|
          = fff.number_field :score, placeholder: true, class: 'clasification-score-input'
      .column.column--right
        .clasification-categories
        = f.fields_for :categories, @clasification.categories do |ff|
          .clasification-categories
            = ff.text_field :name, placeholder: true, class: 'clasification-category-input'
            = ff.hidden_field :id
            .clasification-list
              = render 'word', builder: ff
    .dialogo-buttons
      = f.submit class: ['btn', 'btn-primary']
      button.btn.btn-default.dialogo-button-cancelar type='button' data-dismiss='modal' Cancelar

javascript:
  $categorias = $('.clasification-list');
  for(var i = 0; i < $categorias.size(); i++){
    var elem = $categorias[i];
    Sortable.create(elem, {
      group: {
        name: 'categories',
        pull: function (to, from) {
          var elements = from.el.getElementsByClassName('clasification-word');
          return elements.length > 1;
        },
        put: function(to) {
          var elements = to.el.getElementsByClassName('clasification-word');
          return elements.length < 7;
        }
      },
      onAdd: function(evt){
        var item = evt.item;
        var nuevaCategoriaId = $(item.parentNode.parentNode).find('input[type=hidden]')[0].value
        console.log(nuevaCategoriaId);
        $(item).find('input[type=hidden]')[0].value = nuevaCategoriaId;
      }
    });
  }

Rails field_for部分使用ajax

0 个答案: