Rails 6 + Webpack、数据表、jQuery

Question

我有一个使用以下代码的“全选”按钮：

<script type='text/javascript'>
  $('#check_all').on("click", function() {
    $('input[type="checkbox"]').click();
  });
</script>

自从我升级到 Rails 6 + Webpacker 后，它就停止工作了。控制台显示此错误：

Uncaught ReferenceError: $ is not defined

我设法通过更改来修复它environment.js：

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

到：

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

但一旦修复了这个问题，数据表就会崩溃。

有什么想法如何让他们一起工作吗？谢谢！

Answer 1

将您自己的 Javascript 移至包文件中对于可维护性来说是一个不错的选择。但是，我猜这些是动态生成的复选框。绑定运行时它们可能不存在。您可以通过绑定到父元素并使用事件委托来解决这个问题。document.body是使用 Turbolinks 委托事件的常见绑定选择。

我不喜欢在复选框上调用 click() 。对于用户来说，结果并不总是一致的，并且它会在浏览器中引发一堆不必要的事件。反转checked道具更干净、更一致。

将 DataTables 作为模块加载需要导入垫片。它是一个较旧的包，更喜欢 AMD 而不是 CommonJS，并且在 Webpack 环境中会出现问题。幸运的是，有一个针对旧代码的标准修复，使用imports-loader。不幸的是，即使如此，它还是有一个稍微奇怪的工厂导出，您需要在其中注入window和jQuery变量。幸运的是，这里也记录了它。

将所有这些放在一起，这是一个建议application.js：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import $ from 'jquery'

// Add DataTables jQuery plugin
require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-select')(window, $)

// Load datatables styles
import 'datatables.net-dt/css/jquery.dataTables.css'
import 'datatables.net-select-dt/css/select.dataTables.css'

$(document).on('turbolinks:load', () => {
  $(document.body).on('click', '#check_all', () => {
    var checkBoxes = $('input[type="checkbox"]')
    checkBoxes.prop("checked", !checkBoxes.prop("checked"))
  })

  // placeholder example for datatable with checkboxes
  $('#example').DataTable({
    columnDefs: [{
      render: (data,type,row) => `<input type="checkbox" value="${row[0]}">`,
      orderable: false,
      targets: 0
    }],
    order: [[ 1, 'asc' ]]
  })
})

您需要这样做yarn add imports-loader，因为它是一个 Webpack 选项。

所有这些都不需要 ProvidePlugin。除非您依赖它来将导入注入第三方代码，否则可以安全地将其删除。