Добро пожаловать в стек, так.Вы упомянули несколько шагов без добавления большого количества описаний.Но вот в чем дело с тем, какой Lib вы используете, вам нужно прочитать и снова прочитать его документацию.
Rails и JavaScript Lib работают вместе через веб-пакет.Какая бы библиотека вам ни была нужна.Вы найдете нужную библиотеку Пряжа .
От библиотеки selectize.js до представления вам нужно будет по крайней мере воспроизвести некоторые файлы file.js, file.rb, file.json, rout.rb, так что это огромный вопрос ....
Давайте начнем с этой настройки, и если понадобится дополнительная информация, я потрачу больше времени
Ваше текущее приложение rails добавляет веб-пакет или нет?
Как RoR, у нас есть способы вызвать некоторый JavaScriptlibs и пишите свой собственный скрипт.
Старый метод состоит в том, чтобы поиграть с этим файлом app/assets/javascripts
Современный метод - это работа с веб-пакетом.И делать вещи внутри этого файла, например app/javascript/packs/application.js
Я полагаю, что веб-пакет установлен, потому что вы пометили это слово.Имейте в виду, что можно обрабатывать по старому методу, но оставайтесь обновленными
пряжа
По приведенной выше ссылке пряжа
установите selectize.js в вашем приложении с этой командной строкой
$ yarn add selectize
, который добавит последнюю версию selectize в ваш файл package.json
Вызовите selectize в правильном направлении
$ mkdir app/javascript/components ## to create a folder to file your JS components
$ touch app/javascript/components/selectize.js ## to create a file to build JS components
Перейдите в папку node_modules, в которой размещены все библиотеки javascript, установленные вами или нет.Эта папка находится в корне вашего приложения.
(1) Затем выясните файл node_modules/selectize/dist
Затем откройте файл app/javascript/components/selectize.js в текстовом редакторе и давайте напишем основной код...
# app/javascript/components/selectize.js
import 'selectize/dist/js/selectize.min.js'; # scroll to node folder (1) get that path
import 'selectize/dist/css/selectize.css'; # scroll to node folder (1) get that path
const selectize = () => {
$('.select-beast').selectize({
// create: true, (from example on selectize page)
sortField: 'text'
});
};
export { selectize }; # app/javascript/packs/application.js will call that const
Затем откройте файл inside app/javascript/packs/application.js в текстовом редакторе, и давайте напишем основной код ...
Вызовите компонент выбора в правильном направлении
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
// selectize(); # init the component ⚠️ comment that line for now
Показать форму с правильным выбором класса выбора ('.select-beast')
что-то вроде тис в рубине ...
<%= form_for @category do |f| %>
<%= f.text_field :name %>
<%= f.select(:single_option_ids,
SingleOption.all.collect {|a| [a.name, a.id]},
{:include_blank => "category select"},
{:class => "select-beast"})-%>
<%end %>
Ваш вывод ...
<!-- where you want in your app -->
<select class="select-beast" name="category[single_option_ids]" id="category_single_option_ids"><option value="">category select</option>
<option value="1">category A</option>
<option value="2">category B</option>
...
<option value="37">category X</option>
<option value="38">category Y</option>
<option value="39">category Z</option>
</select>
Инициализация в правильном направлении
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
selectize(); # init the component
сделано ✅
Обновите страницу, и все в порядке.
если проблема не устранена ...
в стиле css
(css от selectize не работает? Не загружен? Не извлечен? ..) перейти к config/webpacker.yml
# line 51
development:
<<: *default
compile: true
extract_css: true
Также проверьте и убедитесь, что CSS из веб-пакета загружен ... как это узнать?загляните в консоль вашего webpack-dev-server
Version: webpack 4.32.2
Time: 2351ms
Built at: 06/05/2019 9:21:14 AM
Asset Size Chunks Chunk Names
css/application-ff5bcd2e.css 7.73 KiB application [emitted] application
# ??this line is a css asset from webpack so css from webpack is loaded
...# other lines
ℹ ｢wdm｣: Compiled successfully.
'$ не определено' или ошибка в консоли javascript
Убедитесь, что в настройках вашего веб-пакета есть эта строка ...
# inside config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
# config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
# config/webpack/production.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
финиш
Нет лучшего способа, по моему мнению, начать с webpack и рельсов.Тогда, конечно, API, JSON, поиск - это хорошая вещь, чтобы пройти через js libs, как selectize, choice или даже select2 в конце.Дайте нам знать, если это хорошее начало, чтобы ответить на ваш вопрос «STEP BY STEP ...»