时间戳

首页 > 解决方案 > Rails 6 + Webpack document.addEventListener 不工作

javascript - Rails 6 + Webpack document.addEventListener 不工作

问题描述

我的代码如下

// app/javascript/packs/application.js
import 'select2';
document.addEventListener(
  'turbolinks:load', function() {
    jQuery('#post_category_ids').select2();
  } 
);

// app/javascript/packs/quill.js
import Quill from 'quill';
document.addEventListener(
  'turbolinks:load', function() {
    var quill = new Quill('#editor', {
      modules: {
        toolbar: true
      },
      theme: 'snow'
    });

    quill.on('text-change', function(delta, oldDelta, source) {
      $('#editorable').val(quill.container.firstChild.innerHTML);
    });
  }
);

quill.js 中的 addEventListener 没有触发。我可以让羽毛笔编辑器只在硬重新加载时工作。如果我将所有代码放在 application.js 中的 addEvenlistener 中，那么 quill 加载就可以了，无需硬刷新。

如何解决这个问题？

标签： javascriptruby-on-railswebpack

解决方案

解决了这个问题。我在 _form.html.erb 中使用了 javascript_pack_tag 助手。似乎 'turbolinks:load' 在那里不可用。我将 javascript_pack_tag 助手移动到 application.html.erb

# app/views/layouts/application.html.erb
<%= javascript_pack_tag 'quill', 'data-turbolinks-track': 'reload' if action_name == "edit" %>

...一切都按预期工作。

推荐阅读