bootstrap-select-rails란?

bootstrap-select이라는 select를 확장하는 jQuery 플러그인이 있습니다. bootstrap-select를 Rails 애플리케이션에 도입하기위한 gem에는 bootstrap-select-rails이 있습니다.

bootstrap-select-rails 시도

빨리 시도해 봅시다.

Rails 애플리케이션 만들기

호스트 환경의 Ruby를 사용하지 않고 Docker를 사용하여 Rails new 을 참고하여 빈 Rails 애플리케이션을 만듭니다.

sprockets-rails 사용

애셋 파일의 컴파일을 활성화하기 위해 sprockets-rails를 활성화합니다.Dockerfile 에서 OS에 설치할 apk 패키지에 nodejs 를 추가합니다.

FROM ruby:2.5-alpine

ENV BUILD_PACKAGES="curl-dev ruby-dev build-base" \
    DEV_PACKAGES="zlib-dev libxml2-dev libxslt-dev tzdata yaml-dev sqlite-dev" \
    RUBY_PACKAGES="ruby-json yaml nodejs"

# Update and install base packages and nokogiri gem that requires a
# native compilation
RUN apk update && \
    apk upgrade && \
    apk add --no-cache --update\
    $BUILD_PACKAGES \
    $DEV_PACKAGES \
    $RUBY_PACKAGES && \
    mkdir -p /usr/src/myapp

# Copy the app into the working directory. This assumes your Gemfile
# is in the root directory and includes your version of Rails that you
# want to run.
WORKDIR /usr/src/myapp
COPY Gemfile /usr/src/myapp
COPY Gemfile.lock /usr/src/myapp

RUN gem install bundler
RUN bundle config build.nokogiri --use-system-libraries && \
    bundle install --jobs=4 --retry=10 --clean

rails new 옵션을 다음과 같이 변경합니다.

docker run --rm -v (pwd):/usr/src/myapp temp rails new . -f -MCTBS --skip-yarn

편집 화면 만들기

편집 화면이 있으면 무엇이든 좋기 때문에 언제나 잊어버린 'Rails의 generate 명령' 비망록 - maeharin의 일기

rails generate scaffold AdminUser name:string mail:string

를 그대로 실행합니다.

docker run --rm -v (pwd):/usr/src/myapp temp rails generate scaffold AdminUser name:string mail:string

Rails를 시작하여 잘 편집 화면을 만들 수 있는지 확인하십시오.

docker run --rm -it -v (pwd):/usr/src/myapp -p 80:3000 temp bin/rails s -b 0.0.0.0

http://localhost/admin_users 를 엽니다.

양식에 select 추가

app/views/admin_users/_form.html.erb 를 편집하여 select 요소를 추가합니다.

<%= form_with(model: admin_user, local: true) do |form| %>
  <select>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
  </select>
<% end %>

다음과 같은 외형이 됩니다.



html의 select 요소 그대로의 외형입니다.

bootstrap-select-rails 도입

bootstrap-select-rails는 jquery와 bootstrap에 의존합니다.Gemfile 에 다음 행을 추가합니다.

gem 'jquery-rails'
gem 'bootstrap'
gem 'bootstrap-select-rails'

bootstrap gem을 사용하려면 jquery 와 popper 와 bootstrap-sprockets 가 필요합니다.
여기에 bootstrap-select를 추가하고 application.js에 다음 줄을 추가합니다.

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require bootstrap-select

bootstrap gem을 사용하려면 scss여야 합니다.application.css 를 application.scss 로 이름을 바꾸고 다음 내용으로 변경합니다.

@import "bootstrap";
@import 'bootstrap-select';

app/views/admin_users/_form.html.erb 를 편집하여 select 요소에 selectpicker 클래스를 추가합니다.

<%= form_with(model: admin_user, local: true) do |form| %>
  <select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
  </select>
<% end %>

외형이 조금 멋졌습니다
select를 열면 다음 이미지입니다.

Turbolinks 5 대응

현재 상태에서는 http://localhost/admin_users/new 을 직접 열면 예상대로 움직입니다.
일단 http://localhost/admin_users 을 연 다음 New Admin User 링크를 따라 새로운 추가 화면을 열면 다음과 같이 예상하지 못한 동작이 발생합니다.



Do not work with Turbolinks 5 well · Issue #31 · Slashek/bootstrap-select-rails 을 참고로 하여 application.js 로 다음과 같이 변경합니다.

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require bootstrap-select

$(document).on('turbolinks:load', function() {
   $(window).trigger('load.bs.select.data-api');
});

이제 한 번 http://localhost/admin_users 을 연 다음 New Admin User 링크를 따라 새로운 추가 화면을 열면 예상대로 작동합니다.

덤

이 기사의 실체는 htps : // 기주 b. 코 m / S ぇ ぇ k / 보오 tst 등 p-se ct-ls ls / 이스에 s / 31 # 이스에 코멘 t-480559605

This solution doesn't work for version 1.13.8.

라고 쓰여 있었으므로, 「그런 일 있는 것일까?」라고 생각해, 동작 확인하기 위한 환경을 만드는 순서였습니다.

htps : // 기주 b. 코 m / ぇ d 숀 / mp ぇ - 어 p ぃ 카치 온 - ぉ r ゔ ぇ 리 fy ng ge ls-와 rk-u-th-t rbo-ks-5 .로 완성된 소스 코드를 공개했습니다.