이 방법은 Rails 애플리케이션에 지능적인 운영성과 현대적인 UI를 제공하는 "Choices"를 포함합니다.

이번 샘플에서는'임무 중 여러 멤버에 대해 결단을 내리라'는 부분을 예로 들어 설명하고 싶다.

동작 이미지

환경 및gem

ruby 2.7.1

rails 6.0.3

웹 패키지 유효

turbolinks가 잘못되었습니다

hamlit-rails

simple_form

절차.

모형의 제작

Choices.js 설정

select 요소와 Choics 링크

추가: RSpec으로 시스템 테스트

샘플

보충: 2010/09시 유지보수 상황

1. 모형 제작

> rails g scaffold task title content
> rails g scaffold member name
> rails g model assignment task:references member:references
> rails db:migrate

task.rb

class Task < ApplicationRecord
  has_many :assignments, dependent: :destroy
  has_many :members, through: :assignments
end

member.rb

class Member < ApplicationRecord
  has_many :assignments, dependent: :destroy
  has_many :tasks, through: :assignments
end

assignment.rb

class Assignment < ApplicationRecord
  belongs_to :member
  belongs_to :task
end

2. Choices.js 설정

> yarn add choices.js

3.select 요소와 Choice의 관계

js측 설정

app/javascript/packs/choices/init.js

import * as Choices from 'choices.js'

document.addEventListener('DOMContentLoaded', function () {

  new Choices('#choices-multiple-remove-button', {
    delimiter: ',',
    maxItemCount: 5,
    removeItemButton: true,
    noChoicesText: '選択されていません',
    itemSelectText: '選択してください',
    maxItemText: (maxItemCount) => {
      return `タスクにアサインできるのは ${maxItemCount} 人までです`;
    },
  });
});

js측 설정 (스타일시트)

app/javascript/src/choices.scss

@import '~choices.js/src/styles/choices'

파일의 import

서류 두 개를 함께 놓아라.
app/javascript/packs/application.js

import './choices/init.js';
import '../src/choices.scss'

뷰 측면 설정

tasks/_form.html.haml

= simple_form_for @task do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .field
    = f.input :title, id: 'task_title'
  .field
    = f.input :content, as: :text

  .field
    = f.association :members,
      required: true,
      as: :select,
      collection: Member.pluck(:name, :id),
      input_html: { id:'choices-multiple-remove-button', multiple: true }

  .actions
    = f.button :submit

Choices.js의 비추기 위해 id를 함께 놓으십시오.init.js 내의 new Choices('#choices-multiple-remove-button에 지정된 id를 설정합니다.여러 선택이니까multiple: true도 잊지 마세요.
발췌하다

= f.association :members,
  required: true,
  as: :select,
  collection: Member.pluck(:name, :id),
  input_html: { id:'choices-multiple-remove-button', multiple: true }

선택한 부분collection: Member.pluck(:name, :id)이면 나중에 초이스가 챙겨줄게.편집 시choices.setValue에 초기값을 설정하지 않을 수도 있습니다.selected 다양한 품목을 선택했다.

렌더링된 HTML

<select multiple="multiple" class="select required" required="required" aria-required="true" name="task[member_ids][]"
  id="task_member_ids">
  <option value="1">Alice</option>
  <option selected="selected" value="2">Bob</option>
  <option selected="selected" value="3">Charlie</option>
</select>

Tasks Controller의 Strong Parameter 수정

배열로 수신할 수 있도록 선택한 항목의 값을 수정합니다.
tasks_controller.rb

def task_params
  params.require(:task).permit(:title, :content, member_ids: [])
end

이것으로 변경👍
소식의 일본화도 있기 때문에 맞춤형으로 표시할 수 있는 옵션이 이것저것 가능할 것 같습니다.
jshjohnson/Choices: A vanilla JS customisable select box/text input plugin ⚡️

4. 추가: RSpec 시스템 테스트

tasks_spec.rb

require 'rails_helper'

RSpec.describe 'Tasks', type: :system do
  let!(:board) { create(:board) }
  let!(:member) { create(:member, name: 'チョイ・スー') }

  it 'タスクを追加できる', js: true do
    visit new_board_task_path(board)

    fill_in 'Title', with: 'Qiita記事を書く'
    fill_in 'Content', with: 'Choices.jsの使い方を紹介します'

    # リストを展開
    first('.choices').click
    # リストアイテムを選択
    first('.choices__item').click
    # リストを閉じるためEsc送信
    find('#task_title').send_keys :escape

    expect do
      click_on 'Create Task'
    end.to change { Task.count }.by(1)
  end
end

※ Rspec과 팩토리봇을 사용했지만, 자세한 내용은 언급하지 않았습니다.만약 움직이지 않는다면, 나에게 메시지를 남길 수 있다면 아마도 대답할 수 있을 것이다.

5. 샘플 창고

hirocueki/kanban-for-choices-js

6. 추기: 2010/09시 유지보수 현황

공식 창고에는 다음과 같은 내용이 있다.
한마디로 "이 프로그램 라이브러리를 지원할 시간이 없습니다. 관리자를 찾고 있습니다. 연락 주세요."사용 시 포함 고려 사항