一步一步如何在 Rails 项目中包含 selectize.JS 构建 Ajax 请求和 Json 答案？

Question

我听说过 lib 调用 selectize。这听起来是一个很好的库，可以帮助我展示一些很棒的下拉效果。但是文档并不容易，我对如何正确实现选择一无所知。我尝试过使用它，直到使用或实现 ajax 都可以。有什么帮助吗？

由于某些原因，当我将 selectize 调用到特定的 selectclass 时，它会起作用。但是，当我需要告诉选择组件以发出 ajax 请求并搜索 JSON 文件以获取答案并构建下拉多选时，我遇到了严重的问题。

文档通过 github 示例提出了该模式：

$('#select-repo').selectize({
      valueField: 'url',
      labelField: 'name',
      searchField: 'name',
      create: false,
      render: {
        option: function(item, escape) {
          return '<div>' +
          '<span class="title">' +
          '<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source')
          + '"></i>' + escape(item.name) + '</span>' +
          '<span class="by">' + escape(item.username) + '</span>' +
          '</span>' +
          '<span class="description">' + escape(item.description) + '</span>' +
          '<ul class="meta">' +
          (item.language ? '<li class="language">' + escape(item.language) + 
          '</li>' : '') +
          '<li class="watchers"><span>' + escape(item.watchers) + '</span> 
          watchers</li>' +
          '<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>'
          + '</ul>' +
          '</div>';
          }
        },
        score: function(search) {
          var score = this.getScoreFunction(search);
          return function(item) {
             return score(item) * (1 + Math.min(item.watchers / 100, 1));
          };
        },
        load: function(query, callback) {
          if (!query.length) return callback();
            $.ajax({
               url: 'https://api.github.com/legacy/repos/search/' + 
               encodeURIComponent(query),
               type: 'GET',
               error: function() {
               callback();
            },
            success: function(res) {
              callback(res.repositories.slice(0, 10));
            }
        });
     }
 });

我尝试过没有任何成功，因为我真的不知道如何构建 JSON 文件，查询也是一个非常难的点。

实际结果是我需要了解在使用该库之前需要构建的步骤。然后一旦完成，我将使用带有 ajx 请求的库

Answer 1

欢迎加入堆栈。您提到的步骤很少，但没有添加大量描述。但是在这里，无论您使用什么 Lib，您都需要阅读并再次阅读其文档。

Rails 和 JavaScript 库通过 webpack 协同工作。无论您需要什么库。你会找到你想要的库Yarn。

从 selectize.js 库到视图，您至少需要播放一些 file.js、file.rb、file.json、routes.rb 所以这是一个巨大的问题......

让我们从那个设置开始，如果需要更多信息，我会花更多时间

你当前的 Rails 应用是否添加了 webpack？

作为 RoR，我们必须设法调用一些 JavaScript 库并编写它们的自定义脚本。

老方法是玩那个文件app/assets/javascripts

现代方法是使用 webpack。并在这个文件中做一些事情，例如app/javascript/packs/application.js

我认为 webpack 已安装，因为您标记了该词。请注意，可以通过旧方法处理但保持更新

纱线

根据上面的链接yarn

使用该命令行在您的应用中安装 selectize.js

$ yarn add selectize

这将在你的文件package.json中添加最后一个版本的selectize

以正确的方式调用 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，让我们编写基本代码......

以正确的方式调用selectize组件

# 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'）

在 ruby​​ 中类似于 tis ...

<%= 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样式

（来自 selectize 的 css 不起作用？未加载？未提取？..）移至 config/webpacker.yml

# line 51
development:
  <<: *default
  compile: true
  extract_css: true

还要检查并确保加载了来自 webpack 的 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.

'$ is not defined'或javascript控制台内出错

确保你的 webpack 设置包含这一行 ...

# 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 和 rails 开始。 当然，API、JSON、搜索对于像 selectize、choice 甚至 select2 这样的 js 库来说是件好事。 让我们知道这是否是回答您问题的良好开端 '一步一步...'