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

Question

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

由于某些原因，当我调用 selectize 到特定的 select 类时它起作用了。但是当我需要告诉选择组件以发出 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 Libs 通过 webpack 协同工作。无论您需要什么库。你会找到你想要的库Yarn .

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

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

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

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

旧方法是使用那个文件 app/assets/javascripts

现代方法是使用 webpack。并在此文件中执行一些操作，例如 app/javascript/packs/application.js

我想 webpack 是因为你标记了那个词而安装的。请注意，可以通过旧方法进行处理，但保持更新

yarn

根据yarn上面的链接

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

$ yarn 添加选择

这将在您的文件 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')

类似 tis in ruby​​ ...

<%= 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' 或错误 inside 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、搜索是通过 js 库(如 selectize、choice 甚至最后的 select2)完成的好东西。让我们知道这是否是回答您问题的良好开端“一步一步……”