jquery - 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 移至包文件中对于可维护性来说是一个不错的选择。但是，我猜这些是动态生成的复选框。绑定(bind)运行时它们可能不存在。您可以通过绑定(bind)到父元素并使用 event delegation 来解决这个问题。 。 document.body 是 Turbolinks 委托(delegate)事件的常见绑定(bind)选择。

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

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

将所有这些放在一起，这是建议的 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添加imports-loader，因为它是一个Webpack选项。

这一切都不需要 ProvidePlugin。除非您依赖它来向第三方代码注入(inject)导入，否则可以安全地将其删除。